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 class="container">
<div class="header">
<h1 class="title">Codys Pokemon Game</h1>
</div>
<div id="game" class="game">
<input class="gameBtn" type="button" onclick="choose1()" value="CLICK TO START">
<input class="infoBtn" type="button" onclick="info()" value="CLICK FOR GAME INFO">
</div>
<div class="user"></div>
<div class="opponent"></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 class="gameInfo">Choose Your Attack</h2>`
gameHTML.innerHTML += `<div class="userHp"><br>Your Health: ${pokemon1[1]}</div>`
gameHTML.innerHTML += `<input class="att1" type="button" onclick="attack1()" value="Use: Attack: ${curPmon[4]}">`
gameHTML.innerHTML += `<input class="att2" type="button" onclick="attack2()" value="Use: Attack: ${curPmon[5]}">`
gameHTML.innerHTML += `<input class="att3" type="button" onclick="attack3()" value="Use: Attack: ${curPmon[6]}">`
gameHTML.innerHTML += `<div class="oppHp"><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')
Your user and opponent are class, but you use document.getElementById('user').
This is some advice
document.getElementsByClassName('user') or document.querySelector('.user') instead<div id="user"></div> instead <div class="user"></div>