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.

https://github.com/SloaneTribble/rochambeau/blob/rps-ui/javascript.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,