0

Javascript innerHTML is working because i can see it in my developer's tools console log but its not rendering the items on my screen

 const textBox = document.getElementsByClassName("container1");
 const button = document.getElementsByClassName("submit");
 const textInput = document.getElementsByClassName("textinput");
 let items = ["yam", "apple", "veggies", "milk"];
 console.log(textInput);

    /*this section below is just to render out the items in the items arrays on my screen*/



for (let i = 0; i<items.length; i++) {
    textBox.innerHTML += `<p>${items[i]}</p>`;
    textBox.textContent += items[i];
    console.log(textBox.innerHTML);
}
Babis.amas
  • 469
  • 2
  • 16
Derin Owoade
  • 11
  • Setting `textContent` replaces all HTML by text. Use `textBox.append(Object.assign(document.createElement("p"), { textContent: items[i] }), items[i]);` instead. But more importantly, `HTMLCollection`s and `NodeList`s neither have a `textContent` property nor an `innerHTML` property. – Sebastian Simon Dec 12 '21 at 12:11

1 Answers1

0

You need pass string in innerHTML and textContent.Like this:

textBox.innerHTML += `<p>${items[i]}</p>`
textBox.textContent += `${items[i]}`
Roman
  • 1
  • 1