Javascript не обновляет значения, пока я не изменю его вручную - PullRequest
Новая
       2

Javascript не обновляет значения, пока я не изменю его вручную

0 голосов
/ 13 июля 2020

Недавно я начал писать коды php и js из хобби. Я попытался создать страницу интернет-магазина из учебника Youtube, но столкнулся с проблемой. Каждый раз, когда я нажимаю «Добавить в корзину», он добавляет продукт в корзину, но общая цена не меняется, пока я не изменю количество продукта. После этого все работает нормально. Вот файл php: 

<!DOCTYPE html>

<html>
<head>
<title>Products</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="store.css">
<link rel="stylesheet" type="text/css" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="store.js" async></script>
</head>
<body>
<?php include "./header.php" ?>
    
    <section class="container content-section">
        <h2 class="section-header">Everything</h2>
        <div class="shop-items">
            <div class="shop-item">
                <span class="shop-item-title">Rubber Duck</span>
                <img class="shop-item-image" src="rubberduck.jpg">
                <div class="shop-item-details">
                    <span class="shop-item-price">$0.99</span>
                    <button class="btn btn-primary shop-item-button" type="button">Add to cart</button>
                </div>
            </div>
            <div class="shop-item">
                <span class="shop-item-title">Board</span>
                <img class="shop-item-image" src="board.jpg">
                <div class="shop-item-details">
                    <span class="shop-item-price">$2.99</span>
                    <button class="btn btn-primary shop-item-button"type="button">Add to cart</button>
                </div>
            </div>
            <div class="shop-item">
                <span class="shop-item-title">Tennis ball</span>
                <img class="shop-item-image" src="tenball.jpg">
                <div class="shop-item-details">
                    <span class="shop-item-price">$0.99</span>
                    <button class="btn btn-primary shop-item-button" type="button">Add to cart</button>
                </div>
            </div>
            <div class="shop-item">
                <span class="shop-item-title">Ball</span>
                <img class="shop-item-image" src="ball.jpg">
                <div class="shop-item-details">
                    <span class="shop-item-price">$1.99</span>
                    <button class="btn btn-primary shop-item-button" type="button">Add to cart</button>
                </div>
            </div>
        </div>
    </section>
    
    <section class="container content-section">
        <h2 class="section-header">My Cart</h2>
        <div class="cart-row">
            <span class="cart-item cart-header cart-column">Product</span>
            <span class="cart-price cart-header cart-column">Price</span>
            <span class="cart-quantity cart-header cart-column">Quantity</span>
        </div>
        <div class="cart-items">
        </div>
        <div class="cart-total">
            <strong class="cart-total-title">Total price</strong>
            <span class="cart-total-price">$0</span>
        </div>
        <button class="btn btn-primary btn-purchase" type="button">Purchase</button>
    </section>

А вот js: 

if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}

function ready() {

var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i++){
    var button = removeCartItemButtons[i]
    button.addEventListener('click', removeCartItem)
}

var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i=0; i < quantityInputs.length; i++){
    var input= quantityInputs[i]
    input.addEventListener('change',quantityChanged)
}

var addToCartButtons = document.getElementsByClassName('shop-item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
}

document.getElementsByClassName('btn-purchase')[0].addEventListener('click',purchaseClicked)
}

function purchaseClicked(){
alert('Thank you for purchasing our products!')
var cartItems = document.getElementsByClassName('cart-items')[0]
while (cartItems.hasChildNodes()){
    cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}

function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}

function quantityChanged(event){
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
    input.value = 1
}
updateCartTotal()
}

function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
addItemToCart(title, price, imageSrc)
}

function addItemToCart(title, price, imageSrc){
var cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i=0; i < cartItemNames.length; i++){
    if (cartItemNames[i].innerText == title) {
        alert('This product is already in cart')
        return
    }
}
var cartRowContents = `
    <div class="cart-item cart-column">
        <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
        <span class="cart-item-title">${title}</span>
    </div>
    <span class="cart-price cart-column">${price}</span>
    <div class="cart-quantity cart-column">
        <input class="cart-quantity-input" type="number" value="1">
        <button class="btn btn-danger" type="button">Remove</button>
    </div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal(){
var cartItemContainer = document.getElementsByClassName('cart-items')[0] 
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i]
    var priceElement = cartRow.getElementsByClassName('cart-price')[0]
    var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
    var price = parseFloat(priceElement.innerText.replace('$', '')) 
    var quantity = quantityElement.value
    total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total 
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...