Блог

Главная - Вопросы по программированию - Как мне изменять значение цены каждый раз, когда я нажимаю кнопку?

Как мне изменять значение цены каждый раз, когда я нажимаю кнопку?

#javascript #html #function #onclick #web-site-project

#javascript #HTML #функция #onclick #веб-сайт-проект

Вопрос:

Сейчас я создаю простой интернет-магазин и внедряю корзину покупок на javascript. Я хочу вызвать свою функцию productTotalPrice(), которая дает мне общую цену этого товара (цена товара * количество). Я хочу обновлять общую цену каждый раз, когда я нажимаю кнопку (кнопка увеличения, кнопка уменьшения и кнопка удаления). Вот мой productTotalPrice() . Я запустил Javascript 3 дня назад, поэтому любой совет был бы полезен!

 // total price per item calculator
function productTotalPrice() {
    var cartItems = document.getElementsByClassName("cart-list");
    var products = document.getElementsByClassName("product");
    for (var i = 0; i <= cartItems.length; i  ) {
        // Please improve this if you can!!
        var product = products[i];
        var productdetail = product.children[2];
        var priceElement = productdetail.children[3];
        var productPrice = parseFloat(priceElement.innerText.replace("€", ""));
        var productQuantity = document.getElementsByClassName("cost")[i].value;
        var priceXquantity = productPrice * productQuantity;
        var price = "€"   priceXquantity;
        document.getElementsByClassName("price")[i].innerText = price;
    }
}

var removeCartItemButtons = document.getElementsByClassName('vknop');

for (var i = 0; i < removeCartItemButtons.length; i  ) {
    var button = removeCartItemButtons[i];
    button.addEventListener('click', function(event) {
        var buttonClicked = event.target;
        buttonClicked.parentElement.parentElement.remove();
        productTotalPrice();
    })
} 
 <div class="cart-list">
        <!-- Product #1 -->
        <div class="product">
          <div>
            <p class="vknop" type="button">X</p>
          </div>

          <div class="image">
            <img src="images/mask1.png" alt="mask">
          </div>

          <div class="detail">
            <p>Mask1</p>
            <p>Color:Green</p>
            <p>size:S</p>
            <p>€10.99</p>
          </div>

          <div class="quantity">
            <button class="add" type="button" name="button">
               
            </button>
            <input class="cost" type="text" name="amount" value="1" id="qtybox">
            <button class="remove" type="button" name="button">
              -
            </button>
          </div>

          <div class="price"></div>
        </div>

Комментарии:

1. Ваш текущий код не работает? Похоже, что ваш код будет делать то, что вы намереваетесь. В чем именно проблема?

2. В чем, по-видимому, проблема?

3. предоставьте html, который соответствует этому

4. @dillon Проблема в том, что цена меняется только при перезагрузке страницы. Я хочу менять цену каждый раз после нажатия кнопки.

5. @paroxyzm Проблема в том, что цена меняется только при перезагрузке страницы. Я хочу менять цену каждый раз после нажатия кнопки. Я вызываю свою функцию внутри функции. Я получаю эту ошибку, когда нажимаю кнопку, соответствующую консоли моего инспектора. «Неперехваченная ошибка типа: productTotalPrice не является функцией»

Ответ №1:

Реализованная логика вашего кода верна, кнопки работают так, как задумано

но проблема с необходимостью обновлять страницу каждый раз, когда вы нажимаете кнопку, чтобы отобразить изменение стоимости корзины или отсутствие товаров, может быть решена с помощью асинхронного Javascript ( AJAX), а не базового JS.

Ваш код должен быть изменен, чтобы принимать асинхронные входные данные из фона или нет (в случае, когда пользователь прокручивает страницу, а не взаимодействует со страницей)

Вы можете узнать больше об AJAX здесь

Ответ №2:

Это было в моем состоянии цикла for. Это должны были быть продукты.длина, а не заголовки.длина.Спасибо всем.