Question

当我添加新项目时使用mz:mzAssistant:token:，查询选择器似乎没有添加它。

因此，当我尝试计算项目时。我只是要计算原始值，而不是新生成的值。

即使您通过变量innerHTML元素，它也只会显示原始元素。

所有这些元素都与原始元素具有相同的类名。

只是无法使它们可见或添加到生成的项目中。

console.log()

Answer 1

@Phil是正确的。您正在脚本的开头运行查询选择器，因此将仅运行一次。因此，当用户单击按钮并将动态html添加到页面时，查询选择器将不会再次触发。

您可以像现在一样在脚本顶部初始化这些查询，但是您需要将它们的值重新分配给事件监听器中的新查询，如下所示：

const total = document.querySelectorAll(".tot")
const price = document.querySelectorAll(".cost");
let textval = document.querySelectorAll('.qty-item');
let cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll('.error');
//
let theform = document.querySelector(".theform");
let newitem = document.querySelector('.new-item');
let createBtn = document.getElementById("create");
let theItem = document.querySelector(".newStuff");

form.addEventListener("click",function(e){

let theHtml = `
 <div>
      <span class="cost">${newitem.value}</span>
    </div>
    <div class="qty">
      <label>QTY:</label><input placeholder="0" class="qty-item">
      </div>
      <div class="tot">
      <span><label>TOTAL</label> $0.0</span>
    </div>
`
//append your HTML to the correct target element then update your query inside the event listener

 textval = document.querySelectorAll('.qty-item');
 cal = document.getElementById("calc");
});

Answer 2

鉴于您所有的querySelectorAll()查询都使用简单的单类名称选择器，则可以将它们全部替换为document.getElementsByClassName()，即

const total = document.getElementsByClassName('tot')
const price = document.getElementsByClassName('cost');
const textval = document.getElementsByClassName('qty-item');
const errorMessage = document.getElementsByClassName('error');

这与querySelectorAll()几乎一样，只是有所不同...

elements是找到的元素的实时 HTMLCollection。

在文档中添加或删除元素时，这些集合中引用的元素将自动更新。

在DOM中附加HTML，选择器看不到

2 个答案: