Estoy haciendo un juego de apuestas y estoy intentando que cuando presionas el botón, blue.png se convierte en green.png, pero me dice que tengo un TypeError Unchaught. También me está dando un error en el onclick, ¿hay alguna manera de quitar esto? Sé que onclick funciona en imágenes, así que no sé por qué no funciona en botones, ¿hay otra propiedad que haga lo mismo?
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>Está utilizando getElementById pero no hay ningún conjunto de ID. Intente establecer una identificación para el img. Ejemplo:
<img src="green.png" id="green" width="100" height="100">
Puede agregar una identificación a ese elemento, que no tiene una. getElementById no puede funcionar de otra manera.
O, si no desea hacer eso, seleccione el valor y el atributo src :
querySelector('[src="green.png"]')Esto devolverá el primer elemento con ese valor de atributo.
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>El script debe ejecutarse DESPUÉS de que se cargue el elemento "tokens". Esto se puede hacer registrando un controlador de onload en la window o colocando el script después del elemento.