Databases
StackOverflow2013
Postsdbo
POJavaScript calculator calculates unchecked box
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript calculator calculates unchecked box
    text
    copied!<p>I'm rather new to javascript and i'm trying to make a calculator that instantly calculates a total price of selected products.</p> <p>The calculator works fine but right now the checkbox gets calculated alongside the rest of the products even when unchecked. I'm trying to make it so that when it is unchecked the value is 0 and when it is checked it is 0.50. </p> <p>This is what I have so far:</p> <pre><code>&lt;head&gt; &lt;style type="text/css"&gt; .right{ margin-top: 10px; width: 150px; height: 45px; background-color: #66CCFF; } p{ margin: 0; padding: 0; } &lt;/style&gt; &lt;script type="text/javascript"&gt; &lt;!-- function calculate() { var A1 = document.getElementById('Amount1').value var A2 = document.getElementById('Amount2').value var A3 = document.getElementById('Amount3').value var PStart = 0; var P1 = A1*1.50; var P2 = A2*1.00; var P3 = A3*1.00; var PTotal = P1+P2+P3; var Insert = document.getElementById("TotalPrice"); TotalPrice.innerHTML= PTotal; } --&gt; &lt;/script&gt; &lt;/head&gt; &lt;body onload="calculate()"&gt; &lt;form&gt; &lt;fieldset&gt; &lt;legend&gt;Price&lt;/legend&gt; &lt;div class="FormRow"&gt; &lt;label for="Amount2"&gt;Console $1,50&lt;/label&gt; &lt;input type="text" min=0 id="Amount1" name="Amount1" oninput="calculate()" /&gt; &lt;/div&gt; &lt;div class="FormRow"&gt; &lt;label for="Amount2"&gt;Controller $1,00&lt;/label&gt; &lt;input type="text" min=0 id="Amount2" name="Amount2" oninput="calculate()" /&gt; &lt;/div&gt; &lt;div class="FormRow"&gt; &lt;label for="Amount3"&gt;Batteries? $0,50&lt;/label&gt; &lt;input type="checkbox" value="0.50" id="Amount3" name="Amount3" onchange="calculate()"/&gt; &lt;/div&gt; &lt;div class="right" &gt; &lt;p&gt;&lt;b&gt;Total price:&lt;/b&gt;&lt;/p&gt; &lt;p id="TotalPrice"&gt; &lt;/p&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload