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 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=2 00px>daddy</button>
<img id="blue" src="blue.png">
</body>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">
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 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=2 00px>daddy</button>
<img id="blue" src="blue.png">
</body>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.