Why do I get an Cannot set properties of null (setting 'innerHTML')-CodePudding

I am making a gambling game and I am trying that when you hit the button the blue.png turns into the green.png but it tells me that I have an Unchaught TypeError. It is also giving me an error at the onclick, is there a way to take this away? I know that onclick works on images so I don't know why it doesn't work on buttons, is there another property that will do about the same thing?

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")
  }

}

<body>
  <div >
    <center>
      <div >
        <span id="tokens">100</span> Tokens<br>
      </div>
      <br>
      <input type="number" size="100">
      
      <div >
        <img src="blue.png" width="100" height="100">
      </div>
      
      <div >
        <img src="red.png" width="100" height="100">
      </div>
      
      <div >
        <img src="green.png" width="100" height="100">
      </div>
      
      <button onclick="gamble()" height="1000000px" width=2 00px>daddy</button>
      <img id="blue" src="blue.png">
</body>

CodePudding user response：

You're using getElementById but there is no id set. Try setting an id for the img. Example:

<img src="green.png" id="green" width="100" height="100">

CodePudding user response：

You could add an ID to that element, which doesn't have one. getElementById can't work otherwise.

Or, if you don't want to do that, select for the src attribute and value:

querySelector('[src="green.png"]')

This will return the first element with that attribute value.

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.querySelector('[src="green.png"]').innerHTML = "<img src='green.png' />";
    console.log("hi")
  }
}

<body>
  <div >
    <center>
      <div >
        <span id="tokens">100</span> Tokens<br>
      </div>
      <br>
      <input type="number" size="100">
      
      <div >
        <img src="blue.png" width="100" height="100">
      </div>
      
      <div >
        <img src="red.png" width="100" height="100">
      </div>
      
      <div >
        <img src="green.png" width="100" height="100">
      </div>
      
      <button onclick="gamble()" height="1000000px" width=2 00px>daddy</button>
      <img id="blue" src="blue.png">
</body>

CodePudding user response：

The script must run AFTER the "tokens" element loads. This can be done either by registering an onload handler to window, or put the script after the element.