时间戳

首页 > 解决方案 > 我的 javascript 无法读取带有 innerText 的 php 数据库 $row 插入的属性

javascript - 我的 javascript 无法读取带有 innerText 的 php 数据库 $row 插入的属性

问题描述

我正在为我的学校项目建立一个在线商店，当我尝试$row在我的数据库中输入一个值时，我不断收到错误消息“未捕获的类型错误：无法读取innerText未定义的属性”。代码应该将产品添加到购物车，它在 HTML 文件中按预期工作，但在 php 文件中不工作。我尝试寻找解决方案，但没有任何效果。我怎样才能解决这个问题？

这是php代码：

<?php
session_start();

?>

<html>
    <head>
    <title>Projekt</title>
        <link rel="stylesheet" href="still.css">
    </head>
    <body>
    <a name="home"></a>
        <div class="header">
        <div class="container">
            <div class="navbar">
                <div class="logo">
                    <img src="logo.png" width="125px">
                </div>
                <nav>
                    <ul>
                        <li><?php
                            if (isset($_SESSION['username'])){
                                    print("<a href=logout.php>".$_SESSION['username']."</a>");
                            }
                            else{
                                print("<a href='login.php'>Login</a>");
                            }
                            
                        ?></li>
                        <li><?php
                            if (isset($_SESSION['username'])){
                                    print("");
                            }
                            else{
                                print("<a href='register.php'>Register</a>");
                            }
                            
                        ?></li>
                    </ul>
                </nav>
                <a href="#cart"><img src="cart.png" width="30px" height="30px"></a>
            </div>
            <div class="row">
                <div class="col-2">
                    <h1>Basketball shop</h1>
                </div>
                <div class="col-2">
                    <img src="nba.png">
                </div>
            </div>
        </div>
        </div>
        <div class="quick">
            <ul>
                <li><a href="#shoes">Shoes</a></li>
                <li><a href="#basketball">Basketball</a></li>
                <li><a href="#jersey">Jersey</a></li>
                <li><a href="#cart">Cart</a></li>
            </ul>
        </div>
        <div class="cont2">
            <h2 class="naslov">Shoes <a name="shoes"></a></h2>
        <?php
            $mysqli = mysqli_connect("localhost", "root", "", "shop");    // spajanje na server i bazu
                                  

            if(!mysqli_connect_errno($mysqli)) {         // provjera da li je bila greska
                    $br=1;     
                    $znak="$";                                                                         
                  $sql = "SELECT * FROM proizvodi";
                  // print($sql);
                  $result = mysqli_query($mysqli, $sql);     // izvršavanje upita
        
                  if($result==True) {
                    if($mysqli->affected_rows==0) {
                       echo "Nema nijednog predmeta u bazi."; 
                    } else {
                        print("<div class='row'>");
                       while($row = mysqli_fetch_assoc($result)) { // dohvat svakog retka iz $result
                            print("<div class='col-3'>
                       <a href='detalji.php?id={$row['id']}'><img class='cart-item-image' src='{$row['slika']}'/></a>
                       <h4 class='cart-item-title'>{$row['naziv']}</h4>
                       <p class='shop-item-price'>$znak{$row['cijena']}</p>
                       <input type='hidden' name='id' value={$row['id']}>
                       <button class='btn btn-primary shop-item-button'type='button'>ADD TO CART</button>
                   </div>");
                   $br++;
                   if($br==4){
                       print("</div>
                       <h2 class='naslov'>Basketball <a name='basketball'></a></h2>
                       <div class='row'>");
                   }
                   if($br==7){
                    print("</div>
                    <h2 class='naslov'>Jersey <a name='jersey'></a></h2>
                    <div class='row'>");
                   }
                       }
                       print("</div>");
                       mysqli_free_result($result);  // oslobađanje memorije
                      }
         
                   } else {
                     print(" Upit je neuspješno izvršen! ");
                   }    
         
             } else {
                       print(" Greška kod spajanja na bazu! " . mysqli_connect_error());
             }
        ?>
        </div>
        <div class="razmak"></div><a name="cart"></a>
            <section class="container content-section">
                <h2 class="section-header">CART</h2>
                <div class="cart-row">
                    <span class="cart-item cart-header cart-column">ITEM</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 class="cart-row">
                        <div class="cart-item cart-column">
                            <img class="cart-item-image" src="warriors.jpg" width="100" height="100">
                            <span class="cart-item-title">Warriors</span>
                        </div>
                        <span class="cart-price cart-column">$25</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>
                    </div>
                    <div class="cart-row">
                        <div class="cart-item cart-column">
                            <img class="cart-item-image" src="uacurry7.jpg" width="100" height="100">
                            <span class="cart-item-title">Under Armour 7</span>
                        </div>
                        <span class="cart-price cart-column">$110</span>
                        <div class="cart-quantity cart-column">
                            <input class="cart-quantity-input" type="number" value="2">
                            <button class="btn btn-danger" type="button">REMOVE</button>
                        </div>
                    </div>
                </div>
                <div class="cart-total">
                    <strong class="cart-total-title">Total</strong>
                    <span class="cart-total-price"> $245</span>
                </div>
                <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
            </section>
            </div>
        </div><div class="footer">
            <div class="container">
            <h3 class="text">basketballshop.com</h3>
                </div>
                <script src="store.js"></script>
    </body>
</html>

这是 javascript（注意：我是 javascript 新手，所以我是通过 youtube 制作这段代码）：

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 your purchase')
    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
    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)
    updateCartTotal()
}

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 item is already added to the 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
}

问题出function addToCartClicked(event)在innerText物业上。

标签： javascriptphpdatabase

解决方案

希望你一切顺利！我在您的代码中发现了以下问题，希望这可以帮助您解决您面临的问题。在您的代码中，您有

 print("<div class='col-3'>
     <a href='detalji.php?id={$row['id']}'><img class='cart-item-image' src='{$row['slika']}'/></a>
     <h4 class='cart-item-title'>{$row['naziv']}</h4>
     <p class='shop-item-price'>$znak{$row['cijena']}</p>
     <input type='hidden' name='id' value={$row['id']}>
     <button class='btn btn-primary shop-item-button'type='button'>ADD TO CART</button>
     </div>");

在这里，如果您签入您的 PHP 代码，您使用的类名是

购物车项目标题和购物车项目图像

在你的javascript代码中你使用了这个

shop-item-title和shop-item-image

推荐阅读