How do you use javascript to isolate all of the checked items on the html file.
I want to see what is checked, this tells me what items are selected from a menu.
A menu has prices for the items checked.
How do you access those items checked in the javascript array that has the price.
I then want to sum up the price for all of the items checked on the html menu.
Almost got a code.
I want to use a forEach(), then isolate the item checked with it s id.
I thought about using split('Checkbox'). But, I am scratching my head then, how you get that to work to get the menuItem array price to add and get total.
total += menu.price.
var menuItems =
[ { itemName: 'salad', price: 13.95 }
, { itemName: 'pancakes', price: 8.95 }
, { itemName: 'omlette', price: 8.95 }
, { itemName: 'croissant', price: 5.95 }
, { itemName: 'muffin', price: 8.95 }
, { itemName: 'cheeseburger', price: 10.95 }
, { itemName: 'teriyaki', price: 12.95 }
, { itemName: 'soup', price: 11.95 }
, { itemName: 'coffee', price: 1.95 }
, { itemName: 'tea', price: 11.95 }
, { itemName: 'beer', price: 5.95 }
, { itemName: 'milk', price: 3.95 }
]
var total = 0;
document.querySelectorAll("input[type='checkbox']")
.forEach(checkbox => {
checkbox.addEventListener('click', function(event) {
if (event.target.checked) {
console.log(event.target.checked);
console.log('total ' + total);
}
})
});
<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
<title>MENU</title>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css" >
</head>
<body>
<div class="name">
<h1>JOE'S FAMILY DINER</h1>
</div>
<table style="width:100%">
<tr>
<th>BreakFast</th>
<th>Lunch</th>
<th>Beverages</th>
</tr>
<tr>
<td>
<label for="Pancakes"> <b>Blueberry Pancakes</b> </label>
<input type="checkbox" id="panCheckbox" name="pancakes"/>
$8.95
</td>
<td>
<label for="burger"> <b>Cheeseburger</b> </label>
<input type="checkbox" id="burg" name="burger"/>
$10.95
</td>
<td>
<label for="Coffee"> <b>Black Coffee:</b> </label>
<input type="checkbox" id="cofCheckbox" name="coffee" />
$1.95
</td>
</tr>
<tr>
<td>
<label for="Omelette"><b>Vegetable Omelette</b></label>
<input type="checkbox" id="omlCheckbox" name="omlette"/>
$8.95
</td>
<td>
<label for="Wrap"> <b>Teriyaki Wrap:</b></label>
<input type="checkbox" id="rapCheckbox" name="wrap" />
$12.95
</td>
<td>
<label for="Tea"><b>Green Tea:</b></label>
<input type="checkbox"id="teCheckbox" name="tea" />
$11.95
</td>
</tr>
<tr>
<td>
<label for="Croissant"> <b>Croissant:</b> </label>
<input type="checkbox" id="crosCheckbox" name="croissant"/>
$5.95
</td>
<td>
<label for="salad"> <b>Ceasar Salad:</b> </label>
<input type="checkbox" id="salCheckbox" name="sald" />
$13.95
</td>
<td>
<label for="beer"> <b>Corona Beer 12 oz:</b> </label>
<input type="checkbox" id="BerCheckbox" name="Beer" />
$5.95
</td>
</tr>
<tr>
<td>
<label for="Muffin"><b>Blueberry Muffin</b> </label>
<input type="checkbox" id="MufCheckbox" name="muffin"/>
$8.95
</td>
<td>
<label for="soup"> <b>Tomato Soup:</b> </label>
<input type="checkbox" id="souCheckbox" name="soup" />
$11.95
</td>
<td>
<label for="Milk"> <b>Chocolate Milk:</b> </label>
<input type="checkbox" id="milCheckbox" name="milk" />
$3.95
</td>
</tr>
</table>
<div>
<form>
<input type="submit" value="Submit" id="sub">
<input type="reset" value="Reset">
</form>
</div>
<div style="margin-top: 10px;">
<button type="button">Total Amount</button>
</div>
<script type="text/javascript" src="/js/menu.js"></script>
</body>
</html>
