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

Question

I'm having a problem with referencing newly created HTML which was created using JavaScript. Unfortunately, I cannot seem to access the newly created html for whatever reason. I've programmed the code to where I can display the numbers, but I cannot then manipulate them. Here is the code:

 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

You need to assign numberss after you add the elements to the DOM. So the assignment has to be in the click listener.

There's no clicked property on button elements, so if (displ.clicked == true) will never succeed and should be removed. You can add a check for whether the numbers have been created to the beginning of the other event listeners.

 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>