即使在我的正文标记中的所有元素之后使用脚本标记，也无法读取 null 的属性（读取“innerHTML”）

Question

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.我在控制台中不断收到Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')错误，脚本标签位于所有div和其他元素下方的body 标签末尾。 The error is only on user & opponent divs in the HTML and with the userPic.innerHTML and oppPic.innerHTML该错误仅出现在 HTML 以及userPic.innerHTML和oppPic.innerHTML中的用户和对手 div 上

  <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:我的script.js文件不应该有任何错误，但如果有，这是我向 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:这些是我的 ID 变量：


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

Answer 1

Your user and opponent are class, but you use document.getElementById('user') .您的user和opponent是 class，但您使用document.getElementById('user') 。 This is some advice这是一些建议

use document.getElementsByClassName('user') or document.querySelector('.user') instead改用document.getElementsByClassName('user')或document.querySelector('.user')
use <div id="user"></div> instead <div class="user"></div>使用<div id="user"></div>代替<div class="user"></div>

即使在我的正文标记中的所有元素之后使用脚本标记，也无法读取 null 的属性（读取“innerHTML”）

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-01-15 04:50:58

即使在我的正文标记中的所有元素之后使用脚本标记，也无法读取 null 的属性（读取“innerHTML”）

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-01-15 04:50:58

解决方案1
2 已采纳 2022-01-15 04:50:58