解决JS Cannot set properties of null报错与按钮onclick失效问题

• Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') 是因为document.getElementById("green.png")没有匹配到任何DOM元素：代码里不存在id为green.png的标签，选择器传参错误，拿到null值后尝试修改innerHTML自然会抛错。
• 按钮onclick绑定失效是因为按钮属性书写错误：原代码里按钮写了width=2 00px，属性值中间带空格会导致HTML解析异常，连带破坏同标签内的onclick属性识别；另外width、height不是button元素的合法原生属性，控制按钮尺寸需要用CSS样式。
• 图片切换逻辑冗余：不需要通过innerHTML插入新img标签，直接修改现有img元素的src属性就能实现图片切换，性能更好也不会产生多余DOM嵌套。

HTML部分修正 #

修复未闭合标签、给目标图片加唯一id、移除按钮上的非法属性：

<body>
  <div class="sectionLeft">
    <center>
      <div class="tokenshower">
        <span id="tokens">100</span> Tokens<br>
      </div>
      <br>
      <input type="number" size="100">
      
      <div class="leftdiamond">
        <img id="leftDiamondImg" src="blue.png" width="100" height="100">
      </div>
      
      <div class="middlediamond">
        <img src="red.png" width="100" height="100">
      </div>
      
      <div class="rightdiamond">
        <img src="green.png" width="100" height="100">
      </div>
      
      <button onclick="gamble()" style="width: 200px; height: 40px;">daddy</button>
    </center>
  </div>
  <!-- 脚本建议放在body末尾，保证DOM加载完成后再执行JS获取元素 -->
  <script>
    // 下方放置JS逻辑代码
  </script>
</body>

JS部分修正 #

修正选择器、改用src属性实现切图：

let tokens = 100
let left = 1
let middle = Math.floor(Math.random() * 10);
let right = Math.floor(Math.random() * 10);
document.getElementById("tokens").innerHTML = formatTokens(tokens);

function formatTokens(num, digits = 1) {
  const si = [
    {value: 1, symbol: ""},
    {value: 1E3, symbol: " K"},
    {value: 1E6, symbol: " Million"},
    {value: 1E9, symbol: " Billion"},
    {value: 1E12, symbol: " trillion"},
    {value: 1E15, symbol: " Quadrillion"},
    {value: 1E18, symbol: " Quintillion"},
    {value: 1E21, symbol: " Sextillion"}
  ];
  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  let i;
  for (i = si.length - 1; i > 0; i--) {
    if (num >= si[i].value) break;
  }
  return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
}

function gamble() {
  if (left === 1) {
    // 直接修改目标图片的src即可完成切换
    document.getElementById("leftDiamondImg").src = "green.png";
    console.log("hi")
  }
}

如果不想用内联onclick，可以用addEventListener实现同等绑定效果，不需要在HTML标签上写事件属性：

// 放在DOM加载完成的回调里执行
document.querySelector('button').addEventListener('click', gamble)

内容的提问来源于stack exchange，提问作者Gabriel O