When to add elements through HTML vs JavaScript, and how to avoid conflicts?

I’m currently learning DOM manipulation with JavaScript, and I’m having a hard time understanding when it makes sense to target nodes with JS to alter their text, attributes, etc. instead of adjusting them in HTML.

Also, I seem to be having issues creating conflicts between my HTML and JS.


As you can see in my project (which will be familiar if you’ve done The Odin Project),

Here’s my main concern: I’ve commented out a section at the bottom of my script – when I include it in the code, it causes my three buttons to disappear from the web page.

I was able to successfully include those buttons and trigger an event listener without using any selectors – I’m pretty sure lines 62-64 are superfluous at this point.

You might also notice that I’m trying to update a variable using JavaScript, and append that variable to a string using .textContent – I’m having very little success with this so far.

Will you please help me understand what I’m missing here?

Thank you,