JS not working

JavaScript
1

Coidepen

I implemented the below-mentioned script on the Coidepen→

where am I faltering? why the script is not working in codepen?

1 Like
2

Hi @codeispoetry, it did work for me, or at least it did seem to work (when I check a checkbox the total price is updated).
If yours is still not working, can you please explain what is failing or tell us what browser or device it is failing on?

Thanks

1 Like
3

I am on chrome.

Is codepen working?

For me code pen is not working on any browser.

4

Works for me on Chrome and Firefox, weird…

5

GIF

6

JavaScript does have its issues. Here’s a fairly comprehensive list of situations and reasons why it wouldn’t work for someone. It’s worth exploring.

https://kryogenix.org/code/browser/everyonehasjs.html

3 Likes
7

Thanks. whats the solution in my case?

8

Hi @codeispoetry, if you check the console you’ll see an

Uncaught TypeError: Cannot read property ‘elements’ of null

… which is because your form has a different ID than the one expected by the script.

9

Fixed. the issue persists.I believe there is something more that is causing the script to fail to work.

10

Then please provide a link to the troublesome code so that we can investigate.

1 Like
11

Sure sir, I have replicated the code here on Codepen

The actual link is here…

12

Thanks for the pen.

The next complaint from the console is on line 59:

Uncaught TypeError: Cannot read property 'addEventListener' of undefined

Do you see that in your browser console?

1 Like
13

Not in the actual website.

image
image739×700 40.8 KB

Not even in codepen console.

image
image1017×736 14.7 KB

14

To troubleshoot I have deleted everything else in custom.js - there are some issues visible now.
there is an issue here:
select.addEventListener("change", updatePriceHandler);

It also says issue here:
}());

select Part is creating issue. Can we disable that part and first check if our check boxes addition is working fine.

16

Sure can. Give that a go yourself, and let us know where the updated code is if you need a hand.

1 Like
18

Step 1 →

function getCheckboxes(form) {
        return form.querySelectorAll("input[type='checkbox']");
    }
    function getCheckboxPrice(checkbox) {
        return checkbox.parentNode.querySelector(".license_price ").innerHTML;
    }
    function getTotalEl(form) {
        return form.querySelector(".totalprice");
    }

Step 2 →
Hidden this part for time being →

// function updatePrice(select, prices) {
    //     var price = getPriceEl(select.form);
    //     price.innerHTML = "$" + prices[select.selectedIndex];
    // }

Step 3 →

function isChecked(checkbox) {
        return checkbox.checked;
    }
    function priceToValue(price) {
        return Number(price.split("$")[1]);
    }
    function sum(val1, val2) {
        return val1 + val2;
    }

Step 4 → Consolidating functions for checkboxes →

function checkboxTotals(checkboxes) {
        return Array.from(checkboxes)
            .filter(isChecked)
            .map(getCheckboxPrice)
            .map(priceToValue)
            .reduce(sum, 0);
    }

Step 5→ Adjusting the Update Total Function →

function updateTotal(form) {
        var total = getTotalEl(form);
        // var dropdownPrice = priceToValue(getPriceEl(form).innerHTML);
        var checkboxTotal = checkboxTotals(getCheckboxes(form));
        // var totalPrice = dropdownPrice + checkboxTotal;
        var totalPrice = checkboxTotal;
        totalprice.innerHTML = "$" + totalPrice;
    }

Slightly confused in this part →

function updatePriceHandler(evt) {
        var select = evt.target;
        var form = select.form;
        updatePrice(select, prices);
        updateTotal(form);
    }
    function updateTotalHandler(evt) {
        var form = evt.target.form;
        updateTotal(form);
    }

    var prices = [59, 236, 1475];
    var form = document.querySelector("#order");
    var select = form.elements.licenseType;
    var checkboxes = getCheckboxes(form);
    select.addEventListener("change", updatePriceHandler);
    checkboxes.forEach(function addCheckboxHandler(checkbox) {
        checkbox.addEventListener("click", updateTotalHandler);
    });

P.S. → Sum function is needed while we are doing only for checkboxes, but I assume the select part will return 0 in sum function.

Conclusion:
output not achieved.

19

@codeispoetry, Can you double-check form.elements.licenseType? I looked at the source of the link you posted above, and I see an id of license_type but no licenseType.

I ran the code below in my JavaScript console, and copy-pasted the output as well:

var form = document.querySelector("#order");
form.elements.licenseType
undefined
form.elements.license_type
<select id=​"license_type" class=​"license_type" name=​"license_type" data-attribute_name=​"attribute_pa_services" data-show_option_none=​"yes">​…​</select>​

For me at least, form.elements.licenseType is undefined. I used license_type to get the elements.

Does that change anything for you? Very strange that you’re not getting the error Uncaught TypeError: Cannot read property 'addEventListener' of undefined. That’s what I see in the console.

1 Like
20

Yes, the tutorial code in the OP from https://jsfiddle.net/nyyL3tw4/2/ uses LicenseType.

It looks like someone has been renaming things in the HTML, and failing to update the JavaScript with those same renames.

1 Like
21

I am sorry i missed it I transferred it from HTML to Wordpress - Looks like something messed up. will update soon.

22

Fixed working now:

var prices = [59, 236, 1475];
  var form = document.querySelector("#order");
  var select = form.elements.license_type;
  var checkboxes = getCheckboxes(form);
  select.addEventListener("change", updatePriceHandler);
  checkboxes.forEach(function addCheckboxHandler(checkbox) {
    checkbox.addEventListener("click", updateTotalHandler);
  });
1 Like