Checkbox clicking works, deselecting checkbox not working Javascript

Question

I am working on calculating price based on the userinput. When user enters the number of pages it will be multiplied by 2 and result will get displayed in #result box. Now when user clicks the checkbox, the total (#result) value will get multiplied by 3 and displays in #result textbox. when user unclicks it, the old result should get displayed in the text box.

Example,

      Total number of pages: 2 ---> total: 4
      checkbox clicked ----> total: 12
      checkbox unchecked ---> total: 4

When the click the checkbox the value 12 is displayed, but when i uncheck the checkbox the value is still 12, instead of displaying 4...

can anyone help me out with the solution

   <html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Calculating</title>
    <script>
        function calculate() 
        {
    var myBox1 = document.getElementById('pages').value;
            if(isNaN(myBox1))
            {
                alert('Enter only numbers');
            }
            else
            {
              const myBox2=2;
              var result = document.getElementById('result');   
              var myResult = myBox1 * myBox2;
              result.value = myResult;
            }   
        }
        function checkbox1()
        {
            var result1 = document.getElementById('result').value;
            const bresult=result1;
            if(document.getElementById('ckbox').checked === true)
            {
                const checks=3;
                var myResult1=result1 * checks;
                result.value = myResult1;
            }
            if(document.getElementById('ckbox').checked === false)
            {
                result.value=bresult;
            }
        }
    </script>
 </head>
 <body>
        <table>
    <tr>
        <td>Number of Pages</td>
        <td>Check Boxes</td>
        <td>Total</td>
    </tr>    

    <tr>
        <td><input id="pages" type="text" oninput="calculate()" /></td>
        <td><input type="checkbox" id="ckbox"   onclick="checkbox1()">Assistance</td>
        <td><input id="result" /></td>
    </tr>
    </table>
    </body>
    </html>

balachandar · Accepted Answer · 2015-11-24 05:07:46Z

While deselect the checkbox you again set the result value. Calculate the value based on page value.

Please try below code.

function calculate() 
{
   var myBox1 = document.getElementById('pages').value;
   if(isNaN(myBox1))
   {
      alert('Enter only numbers');
   }
   else
   {
      const myBox2=2;
      var result = document.getElementById('result');   
      var myResult = myBox1 * myBox2;
      result.value = myResult;
    }   
}

function checkbox1()
{
   var result1 = document.getElementById('result').value;
   const bresult=result1;
   if(document.getElementById('ckbox').checked === true)
   {
      const checks=3;
      var myResult1=result1 * checks;
      result.value = myResult1;
   }
   else
   {
       var myBox1 = document.getElementById('pages').value;
       const myBox2=2;
       result.value=myBox1 * myBox2;
   }
}

<table>
    <tr>
        <td>Number of Pages</td>
        <td>Check Boxes</td>
        <td>Total</td>
    </tr>    

    <tr>
        <td><input id="pages" type="text" oninput="calculate()" /></td>
        <td><input type="checkbox" id="ckbox"   onclick="checkbox1()">Assistance</td>
        <td><input id="result" /></td>
    </tr>
</table>

Hope this will help you.

Collectives™ on Stack Overflow

Checkbox clicking works, deselecting checkbox not working Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related