I've got two functions in my code. First function "addItem" gets the value of each individual input field as you click the arrow to increase/decrease the value. Second function "checkbox" verifies if the checkbox for has been enabled and if so adds the preset numerical value to a running total. What I'm having a hard time figuring out is how to take the input field value and multiple this by the checkbox value only if the checkbox is enabled adding it to my total. In the same way if I was to toggle checkbox to unchecked state I would remove that value from the total. Right now all its doing is when the checkbox is enabled it adds the checkbox value to the running total but it doesn't take into account the input field value when incremented or decremented. I would like it to dynamically calculate the total as the user changes input value and checkbox is enabled. I hope my explanation makes sense. My code is below. Of course there's additional stuff I'll be adding to the code but I'm not able to move forward unless I get this part working. Appreciate any feedback, thanks.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta class="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<title>Restaurant | Online Menu</title>
</head>
<nav>
<button id= "Menu">Menu</button>
<button id= "Cart">Cart</button>
<button id= "About-us">About Us</button>
</nav>
<div id= "item-container">
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "10"> Item#1 $10 | Add To Order
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "0" max="10" style="width: 100px"><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "8"> Item#12 $8 | Add To Order
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "0" max="10" style="width: 100px"><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "6"> Item#3 $6 | Add To Order
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "0" max="10" style="width: 100px"><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "6"> Item#3 $6 | Add To Order
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "0" max="10" style="width: 100px"><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "4"> Item#4 $4 | Add To Order
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "0" max="10" style="width: 100px"><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "2"> Item#5 $2 | Add To Order
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "0" max="10" style="width: 100px"><br><br>
</div>
<div id= "Total-Display">
<h3 id="display-total">Current Total (without taxes) $
<span id= "total-text"></span>
</h3>
</div>
<script src= "functions.js"></script>
<body>
<script src= "checkout-cart.js"></script>
</body>
</html>
functions.js
const counterItems= document.getElementsByClassName('counter-Items')
for (let i = 0; i < counterItems.length; i++) {
let counterItemsIndex = counterItems[i]
counterItemsIndex.addEventListener('change', addItem)
}
function addItem (e) {
let storeItem=
getValue = e.target.value
if (getValue < 0 || getValue >10) {
getValue.value = 0
}
console.log (getValue)
}
const itemCheckBox = document.getElementsByClassName('checkbox')
let total = 0
for (let i = 0; i < itemCheckBox.length; i++) {
itemCheckBoxIndex= itemCheckBox[i]
itemCheckBoxIndex.addEventListener('change', checkboxCheck)
}
function checkboxCheck (e) {
document.getElementById('total-text').textContent = ''
let lineFocus = e.target
let storeValue = parseInt(lineFocus.value)
//Check if checkbox toggled then that price will be included in calculation to display Current Total otherwise it won't
if (lineFocus.checked) {
total+= storeValue
} else {
total-= storeValue
}
console.log(total)
document.getElementById('total-text').append(`${total}`)
}
Aucun commentaire:
Enregistrer un commentaire