回显时，Javascript 代码无法与 PHP 一起运行答案

【问题标题】：Javascript code not functioning with PHP when echo'ed回显时，Javascript 代码无法与 PHP 一起运行
【发布时间】：2020-08-16 16:44:49
【问题描述】：

我的购物车页面中有这段代码，我在其中显示会话变量中的项目。

             <?php 
    if(empty(!$_SESSION['name'])){
        $name = $_SESSION['name'];
        $price = $_SESSION['price']; 
        $qty = $_SESSION['qty'];
        $pic = $_SESSION['pic'];
       
        for($i = 0; $i < count($name); $i++){
            echo '<div class="row list pt-2 pb-2" id="Mango">
            <img src="'.$pic[$i].'" class="product-image col-4 ">
            <div class="col">
                <div class="row mb-2">
                    <div class="col align-self-left ml-2 font-weight-bold" id="name0">'.$name[$i].'</div>
                    <div class="col align-self-right ml-2 font-weight-bold " id="eachTag0"> $ <var id="each0">'.$price[$i].'</var> ea.</div>
                </div>
                <div class="row mt-1 mb-2 border-top">
                    <div class="col-sm-6  pt-2">
                        <div class="row">
                            <div class="col ml-4"><a class="btn btn-outline-info " id="Substracting0"><i class="fa fa-minus"></i></a></div>
                            <div class="col input-group" ><input type="text" class="form-control QTY" id="Quantity0" value="'.$qty[$i].'"></div>
                            <div class="col "> <a class="btn btn-outline-info " id="Adding0"><i class="fa fa-plus"></i></a></div>
                        </div>
                    </div>
                    <div class="col-sm-6  pt-2">
                        <div class="row">
                            <div class="col-7 text-center pt-1" style="font-size:19px" id="totTag0"> $ <var  id="tot0"></var></div>
                            <div class="col ml-2"><a class="btn btn-outline-info" id="Deleting0"><i class="fa fa-close"></i> </a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>';
    }
    }
    else {
        echo "<h2 class='text-center'>Empty cart</h2>";
    }

但是，我在这个 php 文件的下方还有 javascript 代码，这些代码通过它们的 html id 连接到上面的“echo”中的部分代码。

由于某种原因，javascript 代码根本无法运行。难道是因为这段代码被PHP“回显”了？

JS 再往下：

<script type="text/javascript">

            CartStorage = window.localStorage;
            function cartItem  (name, unit, itemprice, quantity, picturepath){
                return {
                    name: name,
                    unit: unit, // " ea." or "/lb"
                    itemprice: itemprice,
                    quantity: quantity,
                    total: function(){ return this.itemprice*this.quantity;},
                    picturepath: picturepath,
                }
            }
            let cartList = [];
            cartList[0] = cartItem("Mango", "ea.", 1.99, 0, "Pictures/Mango-2.jpg" );
            cartList[1] = cartItem("Apple", "/lb", 2.00, 0, "Pictures/appl3.jpg");
            cartList[2] = cartItem("Peach", "ea.", 1.40, 0, "Pictures/peach2.jpg");

            //LOADING PREEXISTING VALUES
            function checkvalues() {
                if (!isNaN(CartStorage.getItem("nbrItems"))) {
                    for (i = 0; i < cartList.length; i++) {
                        let IDstring = "Quantity"+i;
                        document.getElementById(IDstring).placeholder = CartStorage.getItem(IDstring);
                        cartList[i].quantity=Number(CartStorage.getItem(IDstring));
                        calSingleTotal(cartList[i].name);
                    }
                    calnbrItems();
                    calpretotal()
                    calQST();
                    calGST();
                    calTotal();
                }
            }

            checkvalues();
            document.getElementById("Adding0").addEventListener('click',()=> addplus("Mango"));
            document.getElementById("Substracting0").addEventListener('click',()=>  subminus("Mango"));
            document.getElementById("Deleting0").addEventListener('click', ()=> deletefruit("Mango"));
            document.getElementById("Adding1").addEventListener('click',()=> addplus("Apple"));
            document.getElementById("Substracting1").addEventListener('click',()=>  subminus("Apple"));
            document.getElementById("Deleting1").addEventListener('click', ()=> deletefruit("Apple"));
            document.getElementById("Adding2").addEventListener('click',()=> addplus("Peach"));
            document.getElementById("Substracting2").addEventListener('click',()=>  subminus("Peach"));
            document.getElementById("Deleting2").addEventListener('click', ()=> deletefruit("Peach"));

            function savingQTYArray(){
                for (i = 0; i < cartList.length; i++) {
                    let IDstring = "Quantity"+i;
                    CartStorage.setItem(IDstring, document.getElementById(IDstring).placeholder);
                }
            }
            function calpretotal(){
                let pretotal1=0;
                for (i = 0; i < cartList.length; i++) {
                    pretotal1 +=cartList[i].total();
                }
                if(pretotal1.toString().length>3){
                    pretotal1 = Number(pretotal1.toFixed(3));
                }
                document.getElementById("pretotal").textContent = pretotal1;
            }
            function calnbrItems() {
                nbrItems=0;
                for (i = 0; i < cartList.length; i++) {
                    nbrItems += cartList[i].quantity;
                }
                document.getElementById("nbrItems").textContent = nbrItems;
                CartStorage.setItem("nbrItems", nbrItems);
                return nbrItems;
            }
            function calGST(){
                let pretotal1 = Number(document.getElementById("pretotal").textContent);
                let gst1 = pretotal1*0.05;
                if(gst1.toString().length>3){
                    gst1 = Number(gst1.toFixed(2));
                }
                document.getElementById("GST").textContent = gst1;
            }
            function calQST(){
                let pretotal1 = Number(document.getElementById("pretotal").textContent);
                let qst1 = pretotal1*0.09975;
                if(qst1.toString().length>3){
                    qst1 = Number(qst1.toFixed(2));
                }
                document.getElementById("QST").textContent = qst1;
            }
            function calTotal(){
                let pretotal1 = Number(document.getElementById("pretotal").textContent);
                let gst1 = Number(document.getElementById("GST").textContent);
                let qst1 = Number(document.getElementById("QST").textContent);
                let total1 = pretotal1+gst1+qst1;
                if(total1.toString().length>3){
                    total1 = Number(total1.toFixed(2));
                }
                document.getElementById("TOTAL").textContent = total1;
            }
            function addplus(fruitx) {
                let index = cartList.findIndex(cartList => cartList.name === fruitx);
                cartList[index].quantity++;
                let IDstring = "Quantity"+index;
                document.getElementById(IDstring).placeholder = cartList[index].quantity;
                CartStorage.setItem(IDstring, cartList[index].quantity.toString());
                calnbrItems();
                calpretotal();
                calSingleTotal(fruitx);
                calGST();
                calQST();
                calTotal();
            }
            function subminus(fruitx) {
                let index = cartList.findIndex(cartList => cartList.name === fruitx);
                if (cartList[index].quantity!=0) {
                    cartList[index].quantity--;
                    let IDstring = "Quantity" + index;
                    document.getElementById(IDstring).placeholder = cartList[index].quantity;
                    CartStorage.setItem(IDstring, cartList[index].quantity.toString());
                    calnbrItems();
                    calpretotal();
                    calSingleTotal(fruitx);
                    calGST();
                    calQST();
                    calTotal();
                }
            }
            function calSingleTotal(fruitx){
                let index = cartList.findIndex(cartList => cartList.name === fruitx);
                let IDstring = "tot"+index;
                let temp = cartList[index].total();
                if(temp.toString().length>3){
                    temp = Number(temp.toFixed(3));
                }
                document.getElementById(IDstring).textContent = temp;
            }
            function deletefruit(fruitx){
                let index = cartList.findIndex(cartList => cartList.name === fruitx);
                cartList[index].quantity=0;
                let IDstring = "Quantity" + index;
                document.getElementById(IDstring).placeholder = "0";
                document.getElementById(cartList[index].name).style.display="none";
                CartStorage.setItem(IDstring,"0");
                calnbrItems();
                calpretotal();
                calSingleTotal(fruitx);
                calGST();
                calQST();
                calTotal();
            }


        </script>

【问题讨论】：

您是否在标记中包含了 javascript？在呼应他们的同时？
您不回显 javascript 代码，而是编写 HTML 代码。但是，如果 if 语句中的条件为真，则此 HTML 应该会起作用。
您似乎也确实创建了多行 ID 为“Mango”。您可能需要唯一的 ID。另外请向我们展示更下方的js代码
“由于某种原因，javascript 代码根本无法运行。” - 然后您需要向我们展示无法运行的代码，并说明是什么应该发生的事情以及实际发生的事情。 “可能是因为这段代码被 PHP '回显'了？” - 不是。PHP 代码在服务器上执行，然后将结果（输出）发送到客户端，客户端执行javascript。 Javascript 或客户端不知道也不关心 HTML 是如何在服务器上生成的。
很难提供关于 Javascript 的答案，因为这是这里拼图的缺失部分。这可能是因为它是由 PHP 回显的，但如果没有看到应有的代码，就无法判断。尽管如前所述 - ID 属性应该是唯一的

标签： javascript php html shopping-cart

【解决方案1】：

您做错的一件事是您正在调用尚未在 javascript 中声明的函数。您的函数checkvalues() 调用您稍后在JavaScript 中声明的函数。将所有函数声明移到该代码上方，就像这样。

<script type="text/javascript">
        function cartItem  (name, unit, itemprice, quantity, picturepath){
            return {
                name: name,
                unit: unit, // " ea." or "/lb"
                itemprice: itemprice,
                quantity: quantity,
                total: function(){ return this.itemprice*this.quantity;},
                picturepath: picturepath,
            }
        }
         function checkvalues() {
            if (!isNaN(CartStorage.getItem("nbrItems"))) {
                for (i = 0; i < cartList.length; i++) {
                    let IDstring = "Quantity"+i;
                    document.getElementById(IDstring).placeholder = CartStorage.getItem(IDstring);
                    cartList[i].quantity=Number(CartStorage.getItem(IDstring));
                    calSingleTotal(cartList[i].name);
                }
                calnbrItems();
                calpretotal()
                calQST();
                calGST();
                calTotal();
            }
        }

        function savingQTYArray(){
            for (i = 0; i < cartList.length; i++) {
                let IDstring = "Quantity"+i;
                CartStorage.setItem(IDstring, document.getElementById(IDstring).placeholder);
            }
        }
        function calpretotal(){
            let pretotal1=0;
            for (i = 0; i < cartList.length; i++) {
                pretotal1 +=cartList[i].total();
            }
            if(pretotal1.toString().length>3){
                pretotal1 = Number(pretotal1.toFixed(3));
            }
            document.getElementById("pretotal").textContent = pretotal1;
        }
        function calnbrItems() {
            nbrItems=0;
            for (i = 0; i < cartList.length; i++) {
                nbrItems += cartList[i].quantity;
            }
            document.getElementById("nbrItems").textContent = nbrItems;
            CartStorage.setItem("nbrItems", nbrItems);
            return nbrItems;
        }
        function calGST(){
            let pretotal1 = Number(document.getElementById("pretotal").textContent);
            let gst1 = pretotal1*0.05;
            if(gst1.toString().length>3){
                gst1 = Number(gst1.toFixed(2));
            }
            document.getElementById("GST").textContent = gst1;
        }
        function calQST(){
            let pretotal1 = Number(document.getElementById("pretotal").textContent);
            let qst1 = pretotal1*0.09975;
            if(qst1.toString().length>3){
                qst1 = Number(qst1.toFixed(2));
            }
            document.getElementById("QST").textContent = qst1;
        }
        function calTotal(){
            let pretotal1 = Number(document.getElementById("pretotal").textContent);
            let gst1 = Number(document.getElementById("GST").textContent);
            let qst1 = Number(document.getElementById("QST").textContent);
            let total1 = pretotal1+gst1+qst1;
            if(total1.toString().length>3){
                total1 = Number(total1.toFixed(2));
            }
            document.getElementById("TOTAL").textContent = total1;
        }
        function addplus(fruitx) {
            let index = cartList.findIndex(cartList => cartList.name === fruitx);
            cartList[index].quantity++;
            let IDstring = "Quantity"+index;
            document.getElementById(IDstring).placeholder = cartList[index].quantity;
            CartStorage.setItem(IDstring, cartList[index].quantity.toString());
            calnbrItems();
            calpretotal();
            calSingleTotal(fruitx);
            calGST();
            calQST();
            calTotal();
        }
        function subminus(fruitx) {
            let index = cartList.findIndex(cartList => cartList.name === fruitx);
            if (cartList[index].quantity!=0) {
                cartList[index].quantity--;
                let IDstring = "Quantity" + index;
                document.getElementById(IDstring).placeholder = cartList[index].quantity;
                CartStorage.setItem(IDstring, cartList[index].quantity.toString());
                calnbrItems();
                calpretotal();
                calSingleTotal(fruitx);
                calGST();
                calQST();
                calTotal();
            }
        }
        function calSingleTotal(fruitx){
            let index = cartList.findIndex(cartList => cartList.name === fruitx);
            let IDstring = "tot"+index;
            let temp = cartList[index].total();
            if(temp.toString().length>3){
                temp = Number(temp.toFixed(3));
            }
            document.getElementById(IDstring).textContent = temp;
        }
        function deletefruit(fruitx){
            let index = cartList.findIndex(cartList => cartList.name === fruitx);
            cartList[index].quantity=0;
            let IDstring = "Quantity" + index;
            document.getElementById(IDstring).placeholder = "0";
            document.getElementById(cartList[index].name).style.display="none";
            CartStorage.setItem(IDstring,"0");
            calnbrItems();
            calpretotal();
            calSingleTotal(fruitx);
            calGST();
            calQST();
            calTotal();
        }


        CartStorage = window.localStorage;
        
        let cartList = [];
        cartList[0] = cartItem("Mango", "ea.", 1.99, 0, "Pictures/Mango-2.jpg" );
        cartList[1] = cartItem("Apple", "/lb", 2.00, 0, "Pictures/appl3.jpg");
        cartList[2] = cartItem("Peach", "ea.", 1.40, 0, "Pictures/peach2.jpg");

        //LOADING PREEXISTING VALUES
        checkvalues();
        document.getElementById("Adding0").addEventListener('click',()=> addplus("Mango"));
        document.getElementById("Substracting0").addEventListener('click',()=>  subminus("Mango"));
        document.getElementById("Deleting0").addEventListener('click', ()=> deletefruit("Mango"));
        document.getElementById("Adding1").addEventListener('click',()=> addplus("Apple"));
        document.getElementById("Substracting1").addEventListener('click',()=>  subminus("Apple"));
        document.getElementById("Deleting1").addEventListener('click', ()=> deletefruit("Apple"));
        document.getElementById("Adding2").addEventListener('click',()=> addplus("Peach"));
        document.getElementById("Substracting2").addEventListener('click',()=>  subminus("Peach"));
        document.getElementById("Deleting2").addEventListener('click', ()=> deletefruit("Peach"));
    </script>

我看不到您的 HTML，但您还需要确保在将它们添加到 DOM 之后进行最后的 document.getElementById 调用。

这可能不言而喻，但还要确保您使用的是可以解析 ES6 的浏览器。要么，要么您可能只想将事件侦听器的语法更改为旧格式（无论如何我都会这样做，因为我们不是在谈论大量代码或从在这一领域使用 ES6 中受益）。

【讨论】：

谢谢，但我尝试将脚本放在 php 代码之前，但没有成功。还有，我以为php是在JS之前渲染的？
嗯，这取决于，但这是一个单独的问题。您之前的 javascript 代码是调用脚本中稍后声明的 javascript 函数。
您是否检查过控制台是否存在 javascript 错误？如何修改其中一些事件侦听器，使它们具有console.log 以验证它们是否被添加到您想要的元素中？