Mam dwie funkcje w moim kodzie. Pierwsza funkcja "Additem" otrzymuje wartość każdego pojedynczego pola wejściowego, gdy klikniesz strzałkę, aby zwiększyć / zmniejszyć wartość. Druga funkcja "Pole wyboru" weryfikuje, jeśli pole wyboru zostało włączone i jeśli tak, to dodaje ustawioną wartość numeryczną do łączenia biegania. Ciężko mam trudności z wymiarem, jak wziąć wartość pola wejściowego i wiele tego za pomocą wartości poleceniowej tylko wtedy, gdy pole wyboru jest włączone dodawanie go do mojej sumy. W ten sam sposób, gdybym miał przełączyć pole wyboru do niezbadanego stanu Usunąć tę wartość z całkowitej. W tej chwili wszystkie to jest, gdy pole wyboru jest włączone, dodaje wartość poledającej do łączenia, ale nie uwzględnia wartości pola wejściowego po zwrowieniu lub zmniejszeniu. Chciałbym, aby dynamicznie obliczyć łącznie, ponieważ użytkownik zmienia wartość wejściową i pole wyboru jest włączone. Mam nadzieję, że moje wyjaśnienie ma sens. Mój kod jest poniżej. Oczywiście są dodatkowe rzeczy, które będę dodawać do kodu, ale nie jestem w stanie iść do przodu, chyba że dostanę tę część działającą. Doceń wszelkie informacje zwrotne, dzięki.

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>

FUNKCJE.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();
    
}
0
Daniel R 23 lipiec 2020, 06:52

1 odpowiedź

Najlepsza odpowiedź

Wprowadziłem pewne zmiany w kodzie, aby sprawić, że działa, jak się spodziewałeś.

Link Demo CodePen.

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 $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">0</span>
    </h3>
</div>
1
vbrin27 23 lipiec 2020, 04:46