html - Javascript .innerHTML deletes everything else inside the website

Question

I am completely new to JS, HTML and CSS, and I am creating a small project using javascript. The project has multiple divs for boxes

My issue is whenever I use document.getElementById('id').innerHTML = 'test' , to change text inside a div, the text in the div does change, but everything else disappears from the website.

Would greatly appreciate any help!

Answer 1

It seems that your problem lies with the =. You're using = instead of +=.

x = "text" will erase whatever value the variable previously had, since you're redefining the variable x.

x += "text" is equivalent to doing x = x + "text", which is setting x equal to x first, then adding your text.