Javascript-为什么可以'；我用条件语句更新h3的文本内容吗？

我有一个条件，检查一个项是否已添加到数组中。如果该项已添加到数组中，则我将以前声明的变量“isDouble”从“false”设置为“true”。然后，我随后使用另一个条件来检查'isDouble'是否为true

如果'isDouble'为'false'，我想创建一个全新的h3并用该项目的数量填充文本-如果不是，我只想更新该项目的数量而不创建新的h3

处理所有这一切的函数称为“addCartItem（）”——接近代码末尾

有人能帮忙吗

多谢各位

JAVASCRIPT

（函数（）{
让body=document.querySelector（'body'）；
让totalBasket=document.querySelector（'.totalBasket'）；
让cartCount=document.querySelector（'.cartCount'）；
让cartItemsDiv=document.querySelector（'.cartItems'）；
函数DrinkBluePrint（名称、价格）{
this.name=名称；
这个价格=价格；
这个数量=0；
}
let latte=新的DrinkBluePrint（'latte'，5.00）；
设flatW=新的DrinkBluePrint（'平面白色'，3.60）；
设cap=新的DrinkBluePrint（'cap'，2.75）；
设moc=新的DrinkBluePrint（'moc'，3.15）；
设cortado=new-DrinkBluePrint（'cortado'，3.15）；
让数组=[
拿铁，
弗拉特，
帽子
商务部，
科尔塔多
];
让购物车=[]；
让p；
让按钮；
让isDouble=false；
for（设i=0；i{
if（cart.indexOf（数组[i]）！=-1）{
isDouble=true；
}
cart.push（数组[i]）；
displayTotal（）；
addCartItem（）；
});
函数displayTotal（）{
设total=0；
for（设i=0；i=10）{
折扣价格=（总计-3）；
totalBasket.textContent='英镑'+折扣价格固定（2）；
}
}
//下面需要修复的代码
函数addCartItem（）{
//在数量上增加一个
addOne（）；
//创建h3并附加文本节点
设h3=document.createElement（'h3'）；
设h3Text=document.createTextNode（数组[i].name+“”+array[i].price.toFixed（2）+“x”+数组[i].quantity）；
h3.追加子项（h3文本）；
//检查项目是否已添加到购物车
如果（！isDouble）{
//如果以前没有添加项目，请将h3追加到div
cartItemsDiv.儿童（h3）；
}否则{
//如果已添加项目，则更新现有h3的文本
h3.textContent=array[i]。name+“”+array[i]。price.toFixed（2）+“x”+array[i]。quantity+“blah blah blah”；
}
console.log（h3.textContent）；
}
函数addOne（）{
设itemQuantity=array[i]。数量+=1；
}
};
})();

您不能使用textcontent更改数据。 设h3=document.createElement（'h3'）

如果（！isDouble）{ 设h3Text=document.createTextNode（数组[i].name+“”+array[i].price.toFixed（2）+“x”+数组[i].quantity）； h3.追加子项（h3文本）； cartItemsDiv.儿童（h3）； }其他{ h3.textContent=array[i]。name+“”+array[i]。price.toFixed（2）+“x”+array[i]。quantity+“blah blah blah”； h3.追加子项（h3文本）

---

}

在代码中，您可以执行：

        // create h3 and append text node
        let h3 = document.createElement('h3');
        let h3Text = document.createTextNode(array[i].name + " " + array[i].price.toFixed(2) + " x " + array[i].quantity);
        h3.appendChild(h3Text);

        if (!isDouble) {
            // if item hasn't been added before, append the h3 to the div
            cartItemsDiv.appendChild(h3);
        } else {
            // if item has already been added, then update the text of the existing h3
            h3.textContent = array[i].name + " " + array[i].price.toFixed(2) + " x " + array[i].quantity + " blah blah blah";
        }

在

if

子句的后续块中，其中

isDouble

为false（

！isDouble==true

），您似乎做了自己想做的事情。但是，在替代块中，您不修改现有的

h3

元素，而是修改刚刚在

addCartItem

函数中创建的

h3

元素。您需要在替代块中选择现有的

h3

元素

您可以根据

数组[i].name

为

h3

元素提供一个id，然后在调整页面上已有的

h3

时，查询具有该id的元素，然后对其进行修改

let h3 = document.createElement('h3');
h3.id = array[i].name;
...
else {
    h3 = document.getElementById(array[i].name);
    ... // modify the h3 created earlier
}

---

“您不能更改数据”是什么意思？当然，可以通过分配到

.textContent

来修改DOM。请在回答中描述您所更改的内容及其工作原理。嘿，David，谢谢！但是，当我点击另一个按钮添加一个新项目时，购物车总数会上升，但新添加项目的名称不会出现。但是，我添加的第一个项目及其数量会增加。好的，我现在可以单击并将每个新项目添加到DOM中，但前提是我只单击一次项目按钮。例如，如果我点击两次拿铁，我就无法添加其他项目

let h3 = document.createElement('h3');
h3.id = array[i].name;
...
else {
    h3 = document.getElementById(array[i].name);
    ... // modify the h3 created earlier
}