为什么我会收到无法设置 null 属性（设置“innerHTML”）答案

【问题标题】：Why do I get an Cannot set properties of null (setting 'innerHTML')为什么我会收到无法设置 null 属性（设置“innerHTML”）
【发布时间】：2022-06-16 00:45:24
【问题描述】：

我正在制作一个赌博游戏，我正在尝试当你点击按钮时 blue.png 变成 green.png 但它告诉我我有一个 Unchaught TypeError。它在 onclick 上也给了我一个错误，有没有办法把它拿走？我知道 onclick 适用于图像，所以我不知道为什么它不适用于按钮，是否还有其他属性可以做同样的事情？

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<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 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()" height = "1000000px" width = 200px>daddy</button>
 <img id="blue" src="blue.png">
  <script src="script.js"></script>
</body>

</html>

Javascript：

   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)
{
  var 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: 1E18, symbol: " Quintillion" },
    { value: 1E21, symbol: " Sextillion" }
  ];
  var rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  var 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){
    document.getElementById("green.png").innerHTML = "<img src='green.png' />";
  console.log("hi")
}
   
}

【问题讨论】：

因为没有 ID 为“green.png”的元素，请尝试将 ID 添加到要更新的元素并将该 ID 传递给 getElementById。

标签： javascript html