Cannot read properties of null (reading 'innerHTML') Even With Script Tag After All Elemen-CodePudding

I keep getting the Uncaught TypeError: Cannot read properties of null (reading 'innerHTML') error in my console with the script tag at the end of my body tag beneath all divs and other elements. The error is only on user & opponent divs in the HTML and with the userPic.innerHTML and oppPic.innerHTML

  <body>

        <div >

            <div >
                <h1 >Codys Pokemon Game</h1>
            </div>

            <div id="game" >
                <input  type="button" onclick="choose1()" value="CLICK TO START">
                <input  type="button" onclick="info()" value="CLICK FOR GAME INFO">
            </div>

            <div ></div>
            <div ></div>

        </div>
    <script src="script.js"></script>
  </body>

My script.js file shouldn't have any errors but if it does, this is the part where I add a bunch of stuff to my HTML:

    gameHTML.innerHTML = `<h2 >Choose Your Attack</h2>`
    gameHTML.innerHTML  = `<div ><br>Your Health: ${pokemon1[1]}</div>`
    gameHTML.innerHTML  = `<input  type="button" onclick="attack1()" value="Use: Attack: ${curPmon[4]}">`
    gameHTML.innerHTML  = `<input  type="button" onclick="attack2()" value="Use: Attack: ${curPmon[5]}">`
    gameHTML.innerHTML  = `<input  type="button" onclick="attack3()" value="Use: Attack: ${curPmon[6]}">`
    gameHTML.innerHTML  = `<div ><br>Opponent Health: ${curOpp[1]}</div>`
    userPic.innerHTML  = curPmon[7]
    oppPic.innerHTML  = `<img src="${curOpp[7]}" alt="${curOpp[0]}">`

These are the variables I have for the IDs:


var gameHTML = document.getElementById('game')
var userPic = document.getElementById('user')
var oppPic = document.getElementById('opponent')

CodePudding user response：

Your user and opponent are class, but you use document.getElementById('user'). This is some advice

use document.getElementsByClassName('user') or document.querySelector('.user') instead
use <div id="user"></div> instead <div ></div>