I have a program I want to write that asks for the toppings on a pizza and I have 5 toppings that are checkbox items. I am using getElementById to print the result to an id called t_options inside the table, I have tried useing .innerhtml to equal quoted text but that will overwrite the printed statement without displaying more than one. I already tried using more than topping variable inside a single if structure and it did not work either.
Here is the code I am currently using for the checkboxes.
var t1 = document.forms["order"]["topping1"].checked;
var t2 = document.forms["order"]["topping2"].checked;
var t3 = document.forms["order"]["topping3"].checked;
var t4 = document.forms["order"]["topping4"].checked;
var t5 = document.forms["order"]["topping5"].checked;
if (t1 == true) {
top = top 1.5;
document.getElementById("t_options").innerHTML = "Pepperoni";
} else
top = top;
if (t2 == true) {
top = top 1.5;
document.getElementById("t_options").innerHTML = "Sausage";
} else
top = top;
if (t3 == true) {
top = top 1.5;
} else
top = top;
if (t4 == true) {
top = top 1.5;
} else
top = top;
if (t5 == true) {
top = top 1.5;
} else
top = top;
document.getElementById("t_result").innerHTML = "$ " top; table,
th,
td {
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="order" name="order">
<label for="first_last"> Name:</label>
<input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>
<p> Please choose your size of pizza:</p>
<input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
<input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
<input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
<input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>
<p>Please choose your topping ($1.50 each): </p>
<input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </input><br>
<input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </input><br>
<input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </input><br>
<input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </input><br>
<input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </input><br> <br>
<select onclick="getPizza(this)" name="pick_deliv" id="select_id">
<option id="pick_deliv" value="Pickup">Pick up </option>
<option value="Delivery">Delivery </option>
</select> <br> <br>
</form>
<button onclick="getPizza()" id="btn1"> Confirm Order</button>
<h1 id="name_result"> Your Order </h1> <br> <br>
<table style="width:50%">
<tr>
<th>Description</th>
<th>Option</th>
<th>Price</th>
</tr>
<tr>
<td> Size </td>
<td id="s_result"> </td>
<td id="p_result"> </td>
</tr>
<tr>
<td> Toppings </td>
<td id="t_options"> </td>
<td id="t_result"> </td>
</tr>
<tr>
<td> Pick-Up/Delivery</td>
<td id="sel_opt"> </td>
<td id="sel_price"> </td>
</tr>
</table>
<h4 id="total_result">Your Current Total is $ </h4>
<p id="demo"> </p>
</body>
</html>CodePudding user response：
Instead of overwriting t_options for each checkbox, append to it with =.
var t1 = document.forms["order"]["topping1"].checked;
var t2 = document.forms["order"]["topping2"].checked;
var t3 = document.forms["order"]["topping3"].checked;
var t4 = document.forms["order"]["topping4"].checked;
var t5 = document.forms["order"]["topping5"].checked;
// first empty the output element
document.getElementById("t_options").innerHTML = '';
if (t1 == true) {
top = top 1.5;
document.getElementById("t_options").innerHTML = "Pepperoni<br>";
} else
top = top;
if (t2 == true) {
top = top 1.5;
document.getElementById("t_options").innerHTML = "Sausage<br>";
} else
top = top;
if (t3 == true) {
top = top 1.5;
} else
top = top;
if (t4 == true) {
top = top 1.5;
} else
top = top;
if (t5 == true) {
top = top 1.5;
} else
top = top;
document.getElementById("t_result").innerHTML = "$ " top;table,
th,
td {
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="order" name="order">
<label for="first_last"> Name:</label>
<input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>
<p> Please choose your size of pizza:</p>
<input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
<input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
<input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
<input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>
<p>Please choose your topping ($1.50 each): </p>
<input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </input><br>
<input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </input><br>
<input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </input><br>
<input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </input><br>
<input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </input><br> <br>
<select onclick="getPizza(this)" name="pick_deliv" id="select_id">
<option id="pick_deliv" value="Pickup">Pick up </option>
<option value="Delivery">Delivery </option>
</select> <br> <br>
</form>
<button onclick="getPizza()" id="btn1"> Confirm Order</button>
<h1 id="name_result"> Your Order </h1> <br> <br>
<table style="width:50%">
<tr>
<th>Description</th>
<th>Option</th>
<th>Price</th>
</tr>
<tr>
<td> Size </td>
<td id="s_result"> </td>
<td id="p_result"> </td>
</tr>
<tr>
<td> Toppings </td>
<td id="t_options"> </td>
<td id="t_result"> </td>
</tr>
<tr>
<td> Pick-Up/Delivery</td>
<td id="sel_opt"> </td>
<td id="sel_price"> </td>
</tr>
</table>
<h4 id="total_result">Your Current Total is $ </h4>
<p id="demo"> </p>
</body>
</html>CodePudding user response：
Barmar already answered the key points of the question. However, you should also follow the DRY (don't repeat yourself) principle:
function toppings(ev){
const tops=[...document.querySelectorAll("[name^=topping]")]
.filter(t=>t.checked)
.map(t=>t.closest("label").textContent.trim());
document.getElementById("t_options").innerHTML = tops.join(", ");
document.getElementById("t_result").innerHTML = "$ " tops.length*1.5;
}
document.querySelector("form").addEventListener("change",function(ev){
if (ev.target.closest("label")) toppings(ev);
})table,
th,
td {
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="order" name="order">
<label for="first_last"> Name:</label>
<input type="text" name="first_last" id="first_last" placeholder="First Last"> <br>
<p> Please choose your size of pizza:</p>
<input type="radio" name="size" id="s1" value="Small"> Small - $8</input><br>
<input type="radio" name="size" id="s2" value="Medium"> Medium - $10</input><br>
<input type="radio" name="size" id="s3" value="Large"> Large - $12</input><br>
<input type="radio" name="size" id="s4" value="X-Large"> Extra Large - $14</input><br>
<p>Please choose your topping ($1.50 each): </p>
<label><input type="checkbox" name="topping1" id="topping1" value="pepperoni"> Pepperoni </label><br>
<label><input type="checkbox" name="topping2" id="topping2" value="sausage"> Sausage </label><br>
<label><input type="checkbox" name="topping3" id="topping3" value="bacon"> Bacon </label><br>
<label><input type="checkbox" name="topping4" id="topping4" value="onions"> Onions </label><br>
<label><input type="checkbox" name="topping5" id="topping5" value="spinach"> Spinach </label><br> <br>
<select name="pick_deliv" id="select_id">
<option id="pick_deliv" value="Pickup">Pick up </option>
<option value="Delivery">Delivery </option>
</select> <br> <br>
</form>
<button onclick="getPizza()" id="btn1"> Confirm Order</button>
<h1 id="name_result"> Your Order </h1> <br> <br>
<table style="width:50%">
<tr>
<th>Description</th>
<th>Option</th>
<th>Price</th>
</tr>
<tr>
<td> Size </td>
<td id="s_result"> </td>
<td id="p_result"> </td>
</tr>
<tr>
<td> Toppings </td>
<td id="t_options"> </td>
<td id="t_result"> </td>
</tr>
<tr>
<td> Pick-Up/Delivery</td>
<td id="sel_opt"> </td>
<td id="sel_price"> </td>
</tr>
</table>
<h4 id="total_result">Your Current Total is $ </h4>
<p id="demo"> </p>
</body>
</html>