How do you manipulate html code which was created in JavaScript?

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>

You're trying to iterate numbers in the click listener, but the collection is named as numberss. — Teemu
– Teemu, Commented Jan 13, 2020 at 18:10
You're calling document.querySelectorAll(".num") before you add those elements to the DOM. document.querySelectorAll() doesn't create a live nodelist, so adding the elements doesn't update the collection. — Barmar
– Barmar, Commented Jan 13, 2020 at 18:16
Buttons don't have a clicked property. so if (displ.clicked == true) will never succeed. — Barmar
– Barmar, Commented Jan 13, 2020 at 18:17
And even if buttons did have a clicked property, the code provided would never evaluate to true and add the event handlers as that expression would only be evaluated when the JS file was first executed (vs a click event causing the code to run later on). — hungerstar
– hungerstar, Commented Jan 13, 2020 at 18:21
Thank you for the quick responses, Unfortunately, I don't seem to understand what the solution to this is of yet. when I add the html code from javascript, do those elements get added to the DOM? If so, should I just call document.queryselectorAll(".num") after I have created the html elements? — Junaid Razaq
– Junaid Razaq, Commented Jan 13, 2020 at 18:21

Barmar · Accepted Answer · 2020-01-13 18:29:26Z

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>

haha, I love you my guy, I understand now. Thank you, your a real one.

Collectives™ on Stack Overflow

How do you manipulate html code which was created in JavaScript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related