Fatal编程技术网
  • javascript/
  • JavaScript如何从一个函数中获取目标值并乘以选中复选框的元素值

JavaScript如何从一个函数中获取目标值并乘以选中复选框的元素值

javascript checkbox

JavaScript如何从一个函数中获取目标值并乘以选中复选框的元素值,javascript,checkbox,user-input,getelementsbyclassname,Javascript,Checkbox,User Input,Getelementsbyclassname,我的代码中有两个函数。第一个函数“addItem”在单击箭头增加/减少值时获取每个单独输入字段的值。第二个功能“复选框”验证的复选框是否已启用，如果已启用，则将预设数值添加到运行总数中。我很难弄清楚的是，只有在启用复选框并将其添加到我的总数时，如何获取输入字段值并将其乘以复选框值。同样，如果我将复选框切换为未选中状态，我将从总数中删除该值。现在，它所做的就是启用复选框，将复选框值添加到运行总数中，但在递增或递减时不考虑输入字段值。我希望它在用户更改输入值并启用复选框时动态计算总数。我希望我的解释

我的代码中有两个函数。第一个函数“addItem”在单击箭头增加/减少值时获取每个单独输入字段的值。第二个功能“复选框”验证的复选框是否已启用，如果已启用，则将预设数值添加到运行总数中。我很难弄清楚的是，只有在启用复选框并将其添加到我的总数时，如何获取输入字段值并将其乘以复选框值。同样，如果我将复选框切换为未选中状态，我将从总数中删除该值。现在，它所做的就是启用复选框，将复选框值添加到运行总数中，但在递增或递减时不考虑输入字段值。我希望它在用户更改输入值并启用复选框时动态计算总数。我希望我的解释有道理。我的代码如下。当然，我会在代码中添加一些额外的东西，但除非我让这个部分正常工作，否则我无法继续前进。感谢您的反馈，谢谢

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 $10 
        <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 $8
        <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 $6
        <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 $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 $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 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>


餐厅|在线菜单
全部删除
项目#1 10美元
删除


项目#2$8
删除


项目#3$6
删除


项目#4$4
删除


项目#5$2
删除


当前总数$
结账
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'）
const removeBtn=document.getElementById（'remove-button'））
const btnCheckout=document.getElementById（'btn-checkout'））
让total=JSON.parse（localStorage.getItem（'myValue'））
document.getElementById（'total-text'）。innerText=total
retrieveDOMElementsState（）
addEventListener（'click'，onClickBtnCheckout）
函数onClickBtnCheckout（）{
location.assign（“/Checkout.html”）
}
函数retrieveDOMElementsState（）{
让saveChkBxState=JSON.parse（localStorage.getItem（'saveChkBxState'））| |[]
让inputFieldStoreValue=JSON.parse（localStorage.getItem（'inputFieldStoreValue'））| |[]
Array.from（itemCheckBox）.forEach（（itemCheckBoxItem，aIndex）=>{
saveChkBxState.forEach（（savechkbxstateem，bIndex）=>{
saveChkBxStateItem===true&&aIndex==bIndex？itemCheckBoxItem.setAttribute（'checked'，true）：false
})
返回检索到的元素状态
})
Array.from（counterties）.forEach（（countertitemsitems，aIndex）=>{
数组.from（inputFieldStoreValue）.forEach（（inputFieldStoreValueItem，bIndex）=>{
aIndex==bIndex？counterItemsItems.value=inputFieldStoreValueItem:false
})
})
}
Array.from（counterties）.forEach（item=>{
item.addEventListener（'change'，onFieldChange）
})
Array.from（itemCheckBox）.forEach（item=>{
item.addEventListener（'change'，onCheckBox更改）
})
函数onCheckBoxChange（e）{
让复选框=e.target
让inputField=checkbox.nextElementSibling
让price=checkbox.value
让数量=inputField.value
calcTotal（价格、数量、e.target.勾选）
updateTotal（）
}
功能更改（e）{
让saveChkBxState=Array.from（itemCheckBox）.map（item=>{
返回项目。已选中
})
setItem（'saveChkBxState'，JSON.stringify（saveChkBxState））
让inputFieldStoreValue=Array.from（itemCheckBox）.map（item=>{
return item.nextElementSibling.value
})
localStorage.setItem（'inputFieldStoreValue'，JSON.stringify（inputFieldStoreValue））
让inputField=e.target；
复选框=inputField.previousElementSibling；
让数量=parseInt（inputField.value）；
如果（数量<0 | |数量>10）{
数量=输入字段。值=0；
}
inputField.value=数量；
如果（复选框。选中）{
让价格=checkbox.value；
让prevValue=inputField.prevValue；
calcTotal（价格、价值、虚假）；
calcTotal（价格、数量、真实值）；
updateTotal（）；
}
inputField.prevValue=数量；
}
函数calcTotal（价格、数量、添加=真）{
价格=价格| | 0；
数量=数量| | 0；
如果（添加）{
合计+=（价格*数量）；
}否则{
总计-=（价格*数量）；
}
localStorage.setItem（'myValue'，JSON.stringify（总计））
}
函数updateTotal（）{
document.getElementById（'total-text'）。innerText=total；
}
removeBtn.addEventListener（'click'，onClickRemove）
函数onClickRemove（）{
localStorage.clear（）
Array.from（itemCheckBox）.forEach（item=>{
item.checked=false
})
Array.from（counterties）.forEach（item=>{
item.value=“”
})
总数=0
updateTotal（）；
}
我对代码做了一些更改，使其按您的预期工作

const counterties=document.getElementsByClassName（'counter-Items'）；
const itemCheckBox=document.getElementsByClassName（'checkbox'）；
设total=0；
for（设i=0；i10）{
数量=