如何解决回显后，JavaScript代码无法与PHP一起使用
我的购物车页面上有此代码，在其中显示会话变量中的项目。
<?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,"Pictures/Mango-2.jpg" );
cartList[1] = cartItem("Apple","/lb",2.00,"Pictures/appl3.jpg");
cartList[2] = cartItem("Peach",1.40,"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中声明的函数。您的函数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,"Pictures/Mango-2.jpg" );
cartList[1] = cartItem("Apple","/lb",2.00,"Pictures/appl3.jpg");
cartList[2] = cartItem("Peach",1.40,"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，但是您还需要确保将最后的document.getElementById调用添加到DOM后再进行。
这可能不言而喻，但是还要确保您使用的浏览器可以解析ES6。要么，要么您只是想将事件侦听器的语法更改为旧格式（无论如何，我还是会这样做，因为我们不会谈论很多代码，也不会从在这一领域中使用ES6受益）。>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。