Question 171399 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can I fix my Javascript code for an Ecommerce website if adding 20 works but subtracting 20 doesn’t?

I’m trying to build an Ecommerce website. When you click/check a varietion it adds 20 on the total price 100. But when you uncheck the varietion it doesn’t minus on the total price. Please help me I’ve been trying this for months and it just won’t work.

Here’s my code:

<div id="total">500</div>
    
    <input onclick="addTwenty()" id="checkbox1" type="checkbox">R20</input>

    <script>

        let total = document.getElementById("total");
        let twenty = document.getElementById("checkbox1");

        function addTwenty(){
            total = 500;
            twenty = 20;
            if (twenty.checked = true){
                document.getElementById("total").innerHTML = total + twenty;
            } else{
                document.getElementById("total").innerHTML = total - twenty;
            }
        }
        
    </script>

I used If statements. When true, it adds value of 20 on 500, which is 520. But when unchecked it doesn’t minus 20. I want it to minus the same value it added when it’s now unchecked.

Tags:

5

Answers


  1. 0

    you should assign values to innerHTML not variables here.

    <div id="total">500</div>

<input onclick="addTwenty()" id="checkbox1" type="checkbox">R20</input>

<script>
  let totalElement = document.getElementById("total");
  let twentyElement = document.getElementById("checkbox1");

  // ...

  function addTwenty() {
    let total = parseInt(totalElement.innerHTML);
    let twenty = 20;

    if (twentyElement.checked === true) {
      totalElement.innerHTML = total + twenty;
    } else {
      totalElement.innerHTML = total - twenty;
    }
  }
</script>
    Login or Signup to reply.
  2. 0

    = is the assignment operator, not the equality check operator. You should use === instead of =, or better yet, since this is a Boolean, just omit it altogether:

    if (twenty.checked) {
    document.getElementById("total").innerHTML = total + twenty;
} else{
    document.getElementById("total").innerHTML = total - twenty;
}
    Login or Signup to reply.
  3. 0

    Change twenty variable name inside addTwenty function to amount, then it will work. And change your equal comparison from = to === .

        let twenty = document.getElementById("checkbox1");

    function addTwenty(){
        total = 500;
        amount = 20;
        if (twenty.checked === true){
            document.getElementById("total").innerHTML = total + amount;
        } else{
            document.getElementById("total").innerHTML = total - amount;
        }
    }
    
   twenty.addEventListener("click", function(){
   addTwenty();
   });
    Login or Signup to reply.
  4. 0

    You need to use the == or === operator for the conditional comparison. You also are reassigning twenty within your function.

    <div id="total">500</div>
<input onclick="addTwenty()" id="checkbox1" type="checkbox">R20</input>
<script>
    let total = document.getElementById("total");
    let twenty = document.getElementById("checkbox1");

    function addTwenty(){
        total = 500
        amt = 20
        if (twenty.checked){
            document.getElementById("total").innerHTML = total + amt;
        } else{
            document.getElementById("total").innerHTML = total - amt;
        }
    }
</script>

    But you can also just have twenty.checked since it will either be true or false itself.

    Login or Signup to reply.
  5. 0

    Solution:

    Cause and explanation are given below.

    when checked add 20, when unchecked it returns back to 500

        const twenty_check_box = document.getElementById("checkbox1");

    function addTwenty() {
        total = 500;
        twenty = 20;
        if (twenty_check_box.checked == true) {
            total += twenty;
            document.getElementById("total").innerHTML = total;
        } else {
           total -= twenty;
            document.getElementById("total").innerHTML = total;
        }
    }

    Cause

    on line 8 you set twenty as the checkbox -> let twenty = document.getElementById("checkbox1");

    But on line 12, you set twenty = 20; so now the variable twenty does not contain the element, instead, it now has integer 20.

    Again, on line 13, in condition, you used (twenty.checked = true)… But to make it clear to you, = is used to assign value and == is used to check/compare value, so you need to use == here as (twenty.checked == true)

    Solution Explanation

    so, we take the checkbox as twenty_check_box instead of twenty and set it to constant. secondly, we check as (twenty_check_box.checked == true). and also update the total variable as total += twenty meaning total = total + twenty and show it, so now total is 520

    then if unchecked, it subtracts 20 from total so now total is 500 again.

    Hope it solves the issue…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search