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 += `${i}`
  }
})

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)"
    }
  })
}


  
    Home
    About
    Contact
  


  This is just for practice. 
 This will be styled using CSS.



  Multiples of 3 shall be highlighed in red
  Multiples of 5 shall be highlighed in orange
  Multiples of 3 and 5 shall be highlighed in blue

Barmar · Accepted Answer

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 += `${i}`
  }
  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)"
  }
})


  
    Home
    About
    Contact
  


  This is just for practice. 
 This will be styled using CSS.



  Multiples of 3 shall be highlighed in red
  Multiples of 5 shall be highlighed in orange
  Multiples of 3 and 5 shall be highlighed in blue

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

Answers (1)

Related Questions