JavaScript 如何从一个函数中获取目标值并乘以选中复选框的元素值
JavaScript how to take target value from one function and multiply by element value for which the checkbox has been checked
我的代码中有两个函数。当您单击指向 increase/decrease 值的箭头时,第一个函数“addItem”获取每个单独输入字段的值。第二个功能“checkbox”验证复选框是否已启用,如果已启用,则将预设数值添加到 运行 总数。我很难弄清楚的是如何获取输入字段值并将其乘以复选框值,只有在启用复选框时才将其添加到我的总数中。以同样的方式,如果我要将复选框切换到未选中状态,我将从总数中删除该值。现在,它所做的只是在启用复选框时将复选框值添加到 运行 总计中,但在递增或递减时不考虑输入字段值。我希望它在用户更改输入值并启用复选框时动态计算总数。我希望我的解释是有道理的。我的代码如下。当然,我会在代码中添加一些额外的东西,但除非我让这部分工作,否则我无法继续前进。感谢任何反馈,谢谢。
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>
<link rel="shortcut icon" href="images/pngtree-green-leaf-icon-graphic-design-template-vector-png-image_3990501.jpg" type="image/x-icon" />
</head>
<div class= "nav-container">
<nav id= "nav-bar">
<a href= "index.html" class="active-link">Menu</a>
<a href= "about.html">About</a>
<a href= "Checkout.html">Checkout</a>
</nav>
</div>
<button id= "remove-button">Remove All</button>
<div id= "item-container">
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "10"> Item#1
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button> <br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "8"> Item#2
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "6"> Item#3
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "4"> Item#4
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "2"> Item#5
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button><br><br>
</div>
<div id= "Total-Display">
<h3 id="display-total">Current Total $
<span id= "total-text"></span>
</h3>
</div>
<button id= "btn-checkout">Checkout</button>
<script src= "functions.js"></script>
<body>
<script src= "checkout-cart.js"></script>
</body>
</html>
functions.js
const counterItems= document.getElementsByClassName('counter-Items')
const itemCheckBox = document.getElementsByClassName('checkbox')
const removeBtn= document.getElementById('remove-button')
const btnCheckout= document.getElementById('btn-checkout')
let total = JSON.parse(localStorage.getItem('myValue'))
document.getElementById('total-text').innerText = total
retrieveDOMElementsState()
btnCheckout.addEventListener('click', onClickBtnCheckout)
function onClickBtnCheckout () {
location.assign("/Checkout.html")
}
function retrieveDOMElementsState() {
let saveChkBxState= JSON.parse(localStorage.getItem('saveChkBxState')) || []
let inputFieldStoreValue= JSON.parse(localStorage.getItem('inputFieldStoreValue')) || []
Array.from(itemCheckBox).forEach((itemCheckBoxItem, aIndex)=> {
saveChkBxState.forEach((saveChkBxStateItem, bIndex) => {
saveChkBxStateItem===true && aIndex===bIndex ? itemCheckBoxItem.setAttribute('checked', true) : false
})
return retrieveDOMElementsState
})
Array.from(counterItems).forEach((counterItemsItems, aIndex)=>{
Array.from(inputFieldStoreValue).forEach((inputFieldStoreValueItem, bIndex)=>{
aIndex===bIndex ? counterItemsItems.value= inputFieldStoreValueItem : false
})
})
}
Array.from(counterItems).forEach(item=> {
item.addEventListener('change', onFieldChange)
})
Array.from(itemCheckBox).forEach(item=> {
item.addEventListener('change', onCheckBoxChange)
})
function onCheckBoxChange (e) {
let checkbox = e.target
let inputField = checkbox.nextElementSibling
let price = checkbox.value
let quantity = inputField.value
calcTotal(price, quantity, e.target.checked)
updateTotal()
}
function onFieldChange(e){
let saveChkBxState= Array.from(itemCheckBox).map(item=>{
return item.checked
})
localStorage.setItem('saveChkBxState', JSON.stringify(saveChkBxState))
let inputFieldStoreValue= Array.from(itemCheckBox).map(item=>{
return item.nextElementSibling.value
})
localStorage.setItem('inputFieldStoreValue', JSON.stringify(inputFieldStoreValue))
let inputField = e.target;
let checkbox = inputField.previousElementSibling;
let quantity = parseInt(inputField.value);
if(quantity < 0 || quantity > 10){
quantity = inputField.value = 0;
}
inputField.value = quantity;
if(checkbox.checked){
let price = checkbox.value;
let prevValue = inputField.prevValue;
calcTotal(price, prevValue, false);
calcTotal(price, quantity, true);
updateTotal();
}
inputField.prevValue = quantity;
}
function calcTotal(price, quantity, add=true){
price = price || 0;
quantity = quantity || 0;
if(add){
total+=(price*quantity);
}else{
total-=(price*quantity);
}
localStorage.setItem('myValue', JSON.stringify(total))
}
function updateTotal(){
document.getElementById('total-text').innerText = total;
}
removeBtn.addEventListener('click', onClickRemove)
function onClickRemove () {
localStorage.clear()
Array.from(itemCheckBox).forEach(item=>{
item.checked= false
})
Array.from(counterItems).forEach(item=>{
item.value= ''
})
total= 0
updateTotal();
}
我已对代码进行了一些更改以使其按您的预期工作。
const counterItems= document.getElementsByClassName('counter-Items');
const itemCheckBox = document.getElementsByClassName('checkbox');
let total = 0;
for (let i = 0; i < counterItems.length; i++) {
counterItems[i].addEventListener('change', onFieldChange);
}
for (let i = 0; i < itemCheckBox.length; i++) {
itemCheckBox[i].addEventListener('change', onCheckboxChange);
}
function onCheckboxChange(e){
let checkbox = e.target;
let inputField = checkbox.nextElementSibling;
let price = checkbox.value;
let quantity = inputField.value;
calcTotal(price, quantity, e.target.checked);
updateTotal();
}
function onFieldChange(e){
let inputField = e.target;
let checkbox = inputField.previousElementSibling;
let quantity = parseInt(inputField.value);
//This condition is included in your code.
if(quantity < 0 || quantity > 10){
quantity = inputField.value = 0;
}
inputField.value = quantity;
if(checkbox.checked){
let price = checkbox.value;
let prevValue = inputField.prevValue;
calcTotal(price, prevValue, false);
calcTotal(price, quantity, true);
updateTotal();
}
inputField.prevValue = quantity;
}
function calcTotal(price, quantity, add=true){
price = price || 0;
quantity = quantity || 0;
if(add){
total+=(price*quantity);
}else{
total-=(price*quantity);
}
}
function updateTotal(){
document.getElementById('total-text').innerText = total;
}
<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 | 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 | 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 | 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 | 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 | 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 | 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">0</span>
</h3>
</div>
我的代码中有两个函数。当您单击指向 increase/decrease 值的箭头时,第一个函数“addItem”获取每个单独输入字段的值。第二个功能“checkbox”验证复选框是否已启用,如果已启用,则将预设数值添加到 运行 总数。我很难弄清楚的是如何获取输入字段值并将其乘以复选框值,只有在启用复选框时才将其添加到我的总数中。以同样的方式,如果我要将复选框切换到未选中状态,我将从总数中删除该值。现在,它所做的只是在启用复选框时将复选框值添加到 运行 总计中,但在递增或递减时不考虑输入字段值。我希望它在用户更改输入值并启用复选框时动态计算总数。我希望我的解释是有道理的。我的代码如下。当然,我会在代码中添加一些额外的东西,但除非我让这部分工作,否则我无法继续前进。感谢任何反馈,谢谢。
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>
<link rel="shortcut icon" href="images/pngtree-green-leaf-icon-graphic-design-template-vector-png-image_3990501.jpg" type="image/x-icon" />
</head>
<div class= "nav-container">
<nav id= "nav-bar">
<a href= "index.html" class="active-link">Menu</a>
<a href= "about.html">About</a>
<a href= "Checkout.html">Checkout</a>
</nav>
</div>
<button id= "remove-button">Remove All</button>
<div id= "item-container">
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "10"> Item#1
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button> <br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "8"> Item#2
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "6"> Item#3
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "4"> Item#4
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button><br><br>
</div>
<div class= "item-row">
<input type= "checkbox" class= "checkbox" value= "2"> Item#5
<input class= "counter-Items" type= "number" placeholder= "How many?" min= "1" max="10" style="width: 100px"> <button class= "remove-button">Remove</button><br><br>
</div>
<div id= "Total-Display">
<h3 id="display-total">Current Total $
<span id= "total-text"></span>
</h3>
</div>
<button id= "btn-checkout">Checkout</button>
<script src= "functions.js"></script>
<body>
<script src= "checkout-cart.js"></script>
</body>
</html>
functions.js
const counterItems= document.getElementsByClassName('counter-Items')
const itemCheckBox = document.getElementsByClassName('checkbox')
const removeBtn= document.getElementById('remove-button')
const btnCheckout= document.getElementById('btn-checkout')
let total = JSON.parse(localStorage.getItem('myValue'))
document.getElementById('total-text').innerText = total
retrieveDOMElementsState()
btnCheckout.addEventListener('click', onClickBtnCheckout)
function onClickBtnCheckout () {
location.assign("/Checkout.html")
}
function retrieveDOMElementsState() {
let saveChkBxState= JSON.parse(localStorage.getItem('saveChkBxState')) || []
let inputFieldStoreValue= JSON.parse(localStorage.getItem('inputFieldStoreValue')) || []
Array.from(itemCheckBox).forEach((itemCheckBoxItem, aIndex)=> {
saveChkBxState.forEach((saveChkBxStateItem, bIndex) => {
saveChkBxStateItem===true && aIndex===bIndex ? itemCheckBoxItem.setAttribute('checked', true) : false
})
return retrieveDOMElementsState
})
Array.from(counterItems).forEach((counterItemsItems, aIndex)=>{
Array.from(inputFieldStoreValue).forEach((inputFieldStoreValueItem, bIndex)=>{
aIndex===bIndex ? counterItemsItems.value= inputFieldStoreValueItem : false
})
})
}
Array.from(counterItems).forEach(item=> {
item.addEventListener('change', onFieldChange)
})
Array.from(itemCheckBox).forEach(item=> {
item.addEventListener('change', onCheckBoxChange)
})
function onCheckBoxChange (e) {
let checkbox = e.target
let inputField = checkbox.nextElementSibling
let price = checkbox.value
let quantity = inputField.value
calcTotal(price, quantity, e.target.checked)
updateTotal()
}
function onFieldChange(e){
let saveChkBxState= Array.from(itemCheckBox).map(item=>{
return item.checked
})
localStorage.setItem('saveChkBxState', JSON.stringify(saveChkBxState))
let inputFieldStoreValue= Array.from(itemCheckBox).map(item=>{
return item.nextElementSibling.value
})
localStorage.setItem('inputFieldStoreValue', JSON.stringify(inputFieldStoreValue))
let inputField = e.target;
let checkbox = inputField.previousElementSibling;
let quantity = parseInt(inputField.value);
if(quantity < 0 || quantity > 10){
quantity = inputField.value = 0;
}
inputField.value = quantity;
if(checkbox.checked){
let price = checkbox.value;
let prevValue = inputField.prevValue;
calcTotal(price, prevValue, false);
calcTotal(price, quantity, true);
updateTotal();
}
inputField.prevValue = quantity;
}
function calcTotal(price, quantity, add=true){
price = price || 0;
quantity = quantity || 0;
if(add){
total+=(price*quantity);
}else{
total-=(price*quantity);
}
localStorage.setItem('myValue', JSON.stringify(total))
}
function updateTotal(){
document.getElementById('total-text').innerText = total;
}
removeBtn.addEventListener('click', onClickRemove)
function onClickRemove () {
localStorage.clear()
Array.from(itemCheckBox).forEach(item=>{
item.checked= false
})
Array.from(counterItems).forEach(item=>{
item.value= ''
})
total= 0
updateTotal();
}
我已对代码进行了一些更改以使其按您的预期工作。
const counterItems= document.getElementsByClassName('counter-Items');
const itemCheckBox = document.getElementsByClassName('checkbox');
let total = 0;
for (let i = 0; i < counterItems.length; i++) {
counterItems[i].addEventListener('change', onFieldChange);
}
for (let i = 0; i < itemCheckBox.length; i++) {
itemCheckBox[i].addEventListener('change', onCheckboxChange);
}
function onCheckboxChange(e){
let checkbox = e.target;
let inputField = checkbox.nextElementSibling;
let price = checkbox.value;
let quantity = inputField.value;
calcTotal(price, quantity, e.target.checked);
updateTotal();
}
function onFieldChange(e){
let inputField = e.target;
let checkbox = inputField.previousElementSibling;
let quantity = parseInt(inputField.value);
//This condition is included in your code.
if(quantity < 0 || quantity > 10){
quantity = inputField.value = 0;
}
inputField.value = quantity;
if(checkbox.checked){
let price = checkbox.value;
let prevValue = inputField.prevValue;
calcTotal(price, prevValue, false);
calcTotal(price, quantity, true);
updateTotal();
}
inputField.prevValue = quantity;
}
function calcTotal(price, quantity, add=true){
price = price || 0;
quantity = quantity || 0;
if(add){
total+=(price*quantity);
}else{
total-=(price*quantity);
}
}
function updateTotal(){
document.getElementById('total-text').innerText = total;
}
<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 | 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 | 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 | 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 | 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 | 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 | 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">0</span>
</h3>
</div>