Checkbox, but Radio Button

Please forgive me but there are only 26 lines →

Okay, I ask again.

Can you click on the pen.js:60 to see where it takes you?

I could noit fidn any clicking option.

I think you are trying to point me her:

    var price = 0;

No it’s not.

Please tell me which web browser you are using, so that I can try and guide you better.

Sir, Chrome. Latest version.

Thanks.

The codepen console is not all that useful. That’s not the console I was asking you to use.

Instead, go to the Chrome menu (the vertical line of three dots at the top-right of the screen), down to More Tools, and select Developer Tools. That will show you a panel that has a tab called Console.

Usually it’s a keyboard shortcut to see it, of Ctrl+Shift+I or Ctrl+Shift+J (both work on Chrome)

1 Like
Uncaught ReferenceError: price is not defined
    at HTMLDocument.<anonymous> (pen.js:24)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

var sum = price + val;

Good, and you’re being informed that in regard to that line of code, that price is not defined.

1 Like

Yes, I knew issue is in that line. what is the next course of action that I must take? where should I defined it. Previously if was defined as variable?

You should look for where you think you assigned the price variable, and once you know that, it should be relatively easy to understand why the sum line doesn’t know about the price variable.

1 Like

Sir,

It is working with so many bugs:

Please help me further.

Let’s get back to something that works before adding things together.

Simplifying things can help, so let’s extract those functions, and use BeautifyJS and JSLint (and some magic) to get us back to a working state.

Here, the checkbox total and the options price is updated.

function getCheckboxPrice(checkbox) {
    if ($(checkbox).is(":checked")) {
        return parseInt($(checkbox).attr("data-price"));
    }
}
function updateCheckboxPrices(checkboxes) {
    var price = 0;
    checkboxes.forEach(function (checkbox) {
        price += getCheckboxPrice(checkbox) || 0;
    });
    $(".price2").html(price);
}
function updateRadioPrice(radio) {
    if ($(radio).is(":checked")) {
        var val = $(radio).val();
        $(".price").html(val);
    }
}
function init() {
    function checkboxChangeHandler() {
        var checkboxes = $(".checkbox").toArray();
        updateCheckboxPrices(checkboxes);
    }
    function radioChangeHandler(evt) {
        var radio = evt.target;
        updateRadioPrice(radio);
    }
    $(".checkbox").on("change", checkboxChangeHandler);
    $(".radio").on("change", radioChangeHandler);
}

$(document).ready(init);
2 Likes

Sir, this is vanilla JS?

No it is not vanilla - it’s just a reordering of your own code that uses jQuery.
Vanilla JavaScript doesn’t look much different.

1 Like

Thanks for replying sir.

Here’s how vanilla javascript looks different.

An example of jQuery code is:

  $(".checkbox").on("change", checkboxChangeHandler);

whereas vanilla JavaScript uses document.querySelector and addEventListener instead.

  document.querySelector(".checkbox").addEventListener("change", checkboxChangeHandler);

Because that’s quite a long line, it’s commonly split up.

  var checkbox = document.querySelector(".checkbox");
  checkbox.addEventListener("change", checkboxChangeHandler);
1 Like

So If I practice enough of JQuery then later understanding, shifting, and switching the code to Vanilla JS will not be much different.

Can we interchangeability also use this:

return parseInt($(checkbox).data("price"));

and

return parseInt($(checkbox).attr("data-price"));

1 Like

Yes, and the vanilla JavaScript way of doing that is:

return parseInt(checkbox.dataset.price);

or

return parseInt(checkbox.dataset["price"]);

or if you like:

return parseInt(checkbox.getAttribute("data-price");
1 Like

I should also mention that because we are wanting to assign to multiple checkboxes, we need to use a loop.

  var checkboxes = document.querySelectorAll(".checkbox");
  checkboxes.forEach(function addChangeHandler(checkbox) {
    checkbox.addEventListener("change", checkboxChangeHandler);
  });

And if we want to simplify that, we only need the “.checkbox” selector , the event type, and the checkboxChangeHandler callback.

function addEventHandlers(selector, eventType, callback) {
  var els = document.querySelectorAll(selector);
  els.forEach(function addEventHandler(el) {
    el.addEventListener(eventType, callback);
  });
}
// The above code can be put aside in a utilities library or somewhere.

addEventHandlers(".checkbox", "change", checkboxChangeHandler);
1 Like