I've just started to learn JavaScript and have run into a issue trying to get multiple checkboxes to work.
I am trying to calculate the cost of a product based on the options checked. However, my script is automatically assuming that all the boxes have been checked.
What is wrong with this code? Sorry if its a basic question but I have been banging my head for hours now.
function cal() {
var selectionOne = 0;
var selectionTwo = 0;
var selectionThree = 0;
var total = 0;
if (document.getElementById("1").checked = true ){
selectionOne = 25;
}
if (document.getElementById("2").checked = true ){
selectionTwo = 50;
}
if (document.getElementById("3").checked = true ){
selectionThree = 100;
}
total = selectionOne + selectionTwo + selectionThree;
alert ("Your total is £" + total);
}
HTML
<html>
<head>
<title>Basic Pricing Script</title>
</head>
<body>
<script src="script.js"></script>
<p>Please select which options you want from the list</p>
<form name="priceoptions">
<input type="checkbox" id="1" name="big" value="big"> Big Prints<br>
<input type="checkbox" id="2" name="medium" value="medium" > Medium Prints<br>
<input type="checkbox" id="3" name="small" value="small" > Small Prints<br>
<input type="submit" id="button" value="Submit" onclick="cal()">
</form>
</body>
</html>
I've just started to learn JavaScript and have run into a issue trying to get multiple checkboxes to work.
I am trying to calculate the cost of a product based on the options checked. However, my script is automatically assuming that all the boxes have been checked.
What is wrong with this code? Sorry if its a basic question but I have been banging my head for hours now.
function cal() {
var selectionOne = 0;
var selectionTwo = 0;
var selectionThree = 0;
var total = 0;
if (document.getElementById("1").checked = true ){
selectionOne = 25;
}
if (document.getElementById("2").checked = true ){
selectionTwo = 50;
}
if (document.getElementById("3").checked = true ){
selectionThree = 100;
}
total = selectionOne + selectionTwo + selectionThree;
alert ("Your total is £" + total);
}
HTML
<html>
<head>
<title>Basic Pricing Script</title>
</head>
<body>
<script src="script.js"></script>
<p>Please select which options you want from the list</p>
<form name="priceoptions">
<input type="checkbox" id="1" name="big" value="big"> Big Prints<br>
<input type="checkbox" id="2" name="medium" value="medium" > Medium Prints<br>
<input type="checkbox" id="3" name="small" value="small" > Small Prints<br>
<input type="submit" id="button" value="Submit" onclick="cal()">
</form>
</body>
</html>
-
1
In an "if" statement, you need two equal symbols to pare for equality, not just one.
document.getElementById("1").checked == true. – Tricky12 Commented Jan 27, 2017 at 18:37 -
No need for the
== truepart. And all of this can be condensed. Check out my answer – Richard Hamilton Commented Jan 27, 2017 at 18:48
3 Answers
Reset to default 2= is the assignment operator. For parisons, you need to use == or ===.
==: This pares by type===This pares by type and value
Also, saying .checked == true is redundant. You can just use .checked. Furthermore, there is no reason to declare the variables, and then set their values on seperate lines. You can reduce the code by using the ternary operator.
Check out this snippet.
function cal() {
var s1 = document.getElementById("1").checked ? 25 : 0;
var s2 = document.getElementById("2").checked ? 50 : 0;
var s3 = document.getElementById("3").checked ? 100 : 0;
var total = s1 + s2 + s3;
alert ("Your total is £" + total);
}<p>Please select which options you want from the list</p>
<form name="priceoptions">
<input type="checkbox" id="1" name="big" value="big"> Big Prints<br>
<input type="checkbox" id="2" name="medium" value="medium" > Medium Prints<br>
<input type="checkbox" id="3" name="small" value="small" > Small Prints<br>
<input type="submit" id="button" value="Submit" onclick="cal()">
</form>Your parisons are not correct. A single "=" is not the correct way to pare values you need "==" for truthy and "===" for an exact match. Change it to
if (document.getElementById("1").checked == true ){
selectionOne = 25;
}
If you need to pare two values in JavaScript you have to use == or === operators:
if (document.getElementById("1").checked == true ){
also you can simplify this if:
if (document.getElementById("1").checked){