Javascript 尝试使用结帐篮中的cookies显示新价格

为了我学徒期的考试，我需要建立一个香料店，我使用javascript添加了一个加号和减号按钮，当按下时，价格会翻倍或除以2。我也用饼干来节省新的价格。我使用变量$value从特定id获取信息

产品代码：

<?php
error_reporting(E_ALL); 
ini_set('display_errors', 1);
$servername = "127.0.0.1";
$username = "root";
$password = "";
$db_name = "spices";

// Create connection
$conn = new mysqli($servername, $username, $password, $db_name);
// Check connection
if ($conn->connect_error){
    die("Connection failed: " . $conn->connect_error);
} 
$id = $_GET['id'];
$id = mysqli_real_escape_string($conn,$id);
$query = "SELECT * FROM `spice` WHERE `id`='" . $id . "'";
$result = mysqli_query($conn,$query);

foreach ($result as $key => $value) { 
?>
    <div class="col-md-4 inner-container">
        <div class="card border">
            <div class="column-image" style=" background-image: url(<?php echo ($value['image']); ?>" >
            </div>
            <h2><?= $value['spice_name'] ;?></h2><br/>
            <p>Price: £<?= $value['price'] ; ?></p>
            <p>Weight: <?= $value['weight'] ; ?></p>
            £<span id="prices"><?php echo ( $value['price']  * 1);  ?></span><br/>
            <button onclick="plus()"> + </button>
            <span id="quantity"> 1 </span>
            <button onclick="minus()"> - </button><br/>  
            <a href="/basket.php">
                <button onclick="addcookie(<?php echo  $value['id']; ?>)">Add to basket</button>
            </a>

        </div>
<?php } ?>


<script>
var price = <?php echo $value['price']; ?>; 

function addcookie(id){
    var quantity = document.getElementById('quantity').innerHTML; 
    var id = <?php echo $value['id']; ?>;
    document.cookie = "zzz_"+id+"_id="+id+"; ;path=/";
    document.cookie = "zzz_"+id+"_quantity="+quantity+"; ;path=/";
}

function plus(){
    document.getElementById('quantity').innerHTML = parseInt( document.getElementById('quantity').innerHTML) +1;

    document.getElementById('prices').innerHTML = parseInt( document.getElementById('prices').innerHTML) +price;
}

function minus()
{
    if (document.getElementById('quantity').innerHTML > 1){
        document.getElementById('quantity').innerHTML = parseInt( document.getElementById('quantity').innerHTML) -1;

        document.getElementById('prices').innerHTML = parseInt( document.getElementById('prices').innerHTML) -price;
    }
}
</script>

---

您的脚本已打开。甚至您也应该始终在

MYSQLI_uquot>或
PDO
API中使用，而不是将用户提供的值连接到查询中。永远不要相信任何用户输入！好的代码缩进将帮助我们阅读代码，更重要的是，它将帮助您为自己的利益调试代码。您可能会被要求在几周/几个月内修改此代码，最终您将感谢我。嗨，Riggyfolly，我现在将开始阅读此内容，非常感谢，这些提示非常有用！
<?php $i = 0; ?>
<div class="inner-container">

<?php 
foreach ( $_COOKIE as $key => $value) {
    
if ((strpos($key,"zzz_") !== false) && (strpos($key,"id") !== false)) {
        $sql2 = "SELECT * FROM spice WHERE id = $value";
      
        if (is_array($value) || is_object($value)) {
            foreach($sql2 as $result2){
                echo $result2->spice_name . "<br>";?>
                £<?php echo ($result2->price * $_COOKIE['zzz_'.$value.'_quantity']) . "<br>";
                echo $_COOKIE['zzz_'.$value.'_quantity'] . "<br/>"; ?>
                <button onclick="deletecookie(<?php echo $value; ?>)">Delete Product</button><br/><br/>
     <?php
                $i++; 
            }
        }
    }
}
if ($i == 0 ) {
    echo "EMPTY"."<br/>";
}
?> 

https://i.stack.imgur.com/tCyYy.jpg
https://i.stack.imgur.com/VDBDw.png