你如何操作用 JavaScript 创建的 html 代码？

Question

我在引用使用 JavaScript 创建的新创建的 HTML 时遇到问题。 不幸的是，无论出于何种原因，我似乎都无法访问新创建的 html。 我已经将代码编程到可以显示数字的位置，但是我无法操作它们。 这是代码：

 let activ = document.querySelector("#fizbuz--btn"); 0 let rever = document.querySelector("#fizbuz--btn1"); let displ = document.querySelector("#fizbuz--btn2"); let numbers = document.querySelector(".numbers") let numberss = document.querySelectorAll(".num") displ.addEventListener("click", () => { for (i = 0; i < 22; i++) { numbers.innerHTML += `<div class="num">${i}</div>` } }) if (displ.clicked == true) { activ.addEventListener("click", () => { for (i = 0; i < numberss.length; i++) { if (numberss[i].innerHTML % 3 == 0 && numberss[i].innerHTML % 5 == 0) { numberss[i].style.backgroundColor = "blue" } else if (numberss[i].innerHTML % 3 == 0) { numberss[i].style.backgroundColor = "red"; } else if (numberss[i].innerHTML % 5 == 0) { numberss[i].style.backgroundColor = "orange" } } }) rever.addEventListener("click", () => { for (i = 0; i < numbers.length; i++) { numbers[i].style.backgroundColor = "rgb(61, 133, 117)" } }) }

 <div class="bg-color"> <div class="navbar"> <div class="nav--head">Home</div> <div class="nav--head">About</div> <div class="nav--head">Contact</div> </div> </div> <div class="subHeading"> This is just for practice. <br> This will be styled using CSS. </div> <div class="fbinfo"> <div class="subhead">Multiples of 3 shall be highlighed in red</div> <div class="subhead">Multiples of 5 shall be highlighed in orange</div> <div class="subhead">Multiples of 3 and 5 shall be highlighed in blue</div> </div> <div class="fizbuzz"> <div class="btns"> <button id="fizbuz--btn2">Click Me for NUMBERS</button> <button id="fizbuz--btn">Click Me for FIZZBUZZ</button> <button id="fizbuz--btn1">Click Me for REVERSE</button> </div> <div class="numbers"> <!-- <div class="num">1</div> <div class="num">2</div> <div class="num">3</div> <div class="num">4</div> <div class="num">5</div> <div class="num">6</div> <div class="num">7</div> <div class="num">8</div> <div class="num">9</div> <div class="num">10</div> <div class="num">11</div> <div class="num">12</div> <div class="num">13</div> <div class="num">14</div> <div class="num">15</div> <div class="num">16</div> <div class="num">17</div> <div class="num">18</div> <div class="num">19</div> <div class="num">20</div> --> </div> </div>

Answer 1

将元素添加到 DOM后，您需要分配numberss 。 所以分配必须在点击监听器中。

按钮元素没有clicked属性，因此if (displ.clicked == true)永远不会成功，应该删除。 您可以在其他事件侦听器的开头添加检查数字是否已创建。

 let activ = document.querySelector("#fizbuz--btn"); let rever = document.querySelector("#fizbuz--btn1"); let displ = document.querySelector("#fizbuz--btn2"); let numbers = document.querySelector(".numbers") let numberss; displ.addEventListener("click", () => { for (i = 0; i < 22; i++) { numbers.innerHTML += `<div class="num">${i}</div>` } numberss = document.querySelectorAll(".num") }) activ.addEventListener("click", () => { if (!numberss) { alert("click on NUMBERS first"); return; } for (i = 0; i < numberss.length; i++) { if (numberss[i].innerHTML % 3 == 0 && numberss[i].innerHTML % 5 == 0) { numberss[i].style.backgroundColor = "blue" } else if (numberss[i].innerHTML % 3 == 0) { numberss[i].style.backgroundColor = "red"; } else if (numberss[i].innerHTML % 5 == 0) { numberss[i].style.backgroundColor = "orange" } } }) rever.addEventListener("click", () => { if (!numberss) { alert("click on NUMBERS first"); return; } for (i = 0; i < numberss.length; i++) { numberss[i].style.backgroundColor = "rgb(61, 133, 117)" } })

 <div class="bg-color"> <div class="navbar"> <div class="nav--head">Home</div> <div class="nav--head">About</div> <div class="nav--head">Contact</div> </div> </div> <div class="subHeading"> This is just for practice. <br> This will be styled using CSS. </div> <div class="fbinfo"> <div class="subhead">Multiples of 3 shall be highlighed in red</div> <div class="subhead">Multiples of 5 shall be highlighed in orange</div> <div class="subhead">Multiples of 3 and 5 shall be highlighed in blue</div> </div> <div class="fizbuzz"> <div class="btns"> <button id="fizbuz--btn2">Click Me for NUMBERS</button> <button id="fizbuz--btn">Click Me for FIZZBUZZ</button> <button id="fizbuz--btn1">Click Me for REVERSE</button> </div> <div class="numbers"> <!-- <div class="num">1</div> <div class="num">2</div> <div class="num">3</div> <div class="num">4</div> <div class="num">5</div> <div class="num">6</div> <div class="num">7</div> <div class="num">8</div> <div class="num">9</div> <div class="num">10</div> <div class="num">11</div> <div class="num">12</div> <div class="num">13</div> <div class="num">14</div> <div class="num">15</div> <div class="num">16</div> <div class="num">17</div> <div class="num">18</div> <div class="num">19</div> <div class="num">20</div> --> </div> </div>