Hice este botón y le agregué Math.floor (Math.random() * 2 + 1) para dar mal y corregir aleatoriamente. y agregué 5 imágenes como vidas que cada vez que me equivoco, una de las imágenes se ocultará o eliminará. pero tengo 2 problemas: el primero es que cada vez que se elimina una imagen, no se detiene y elimina todas las demás imágenes sin volver a math.random. El segundo problema es que cuando obtengo una respuesta incorrecta, se necesitan clics para comenzar a eliminar las imágenes. ¡He estado tratando de arreglarlo pero simplemente no pude resolverlo! puede ejecutar el código usted mismo y probarlo si no entendió lo que dije. Si me ayudan, por favor explíquenme cuál fue el problema.
var button1 = 1; var span1 = document.getElementById("count1"); var span2 = document.getElementById("count2"); document.getElementById("button1").onclick = function() { let btn1 = Math.floor(Math.random() * 2 + 1); if (btn1 == 1) { if (parseInt(span1.innerHTML) < 10) span1.innerHTML = parseInt(span1.innerHTML) + 1; } else if (parseInt(span2.innerHTML) < 5) { let imageToDelete = 1; document.getElementById("button1").onclick = function() { document.getElementById("image_" + imageToDelete).style.visibility = "hidden"; imageToDelete++; span2.innerHTML = parseInt(span2.innerHTML) + 1; } } } <input id="button1" type="button" value="click me?" style="height: 100px; width: 100px;"> <div style="margin-top: 40px;"></div> <div id="output"> <img id="image_1" src="/images/person1.jpg"> <img id="image_2" src="/images/person1.jpg"> <img id="image_3" src="/images/person1.jpg"> <img id="image_4" src="/images/person1.jpg"> <img id="image_5" src="/images/person1.jpg"> </div> <p id="p1">CORRECT: <span id="count1">0</span></p> <p id="p2">ERROR: <span id="count2">0</span></p>¿Algo como esto tal vez?
//var button1 = 1; var span1 = document.getElementById("count1"); var span2 = document.getElementById("count2"); var lives = document.getElementsByClassName("img"); var deads = 0; document.getElementById("button1").onclick = function() { if (deads >= 5) { alert('no more lives'); return; } var rand = Math.random(); var sp1 = parseInt(span1.innerHTML); var sp2 = parseInt(span2.innerHTML); if (rand < .5 && sp1 < 10) { if (deads > 0) deads--; sp1++; span1.innerHTML = sp1; lives[deads].style.visibility = 'visible'; } else { sp2++; span2.innerHTML = sp2; lives[deads].style.visibility = 'hidden'; deads++; } } <input id="button1" type="button" value="click me?" style="height: 100px; width: 100px;"> <div style="margin-top: 40px;"></div> <div id="output"> <img id="image_1" class='img' src="/images/person1.jpg"> <img id="image_2" class='img' src="/images/person1.jpg"> <img id="image_3" class='img' src="/images/person1.jpg"> <img id="image_4" class='img' src="/images/person1.jpg"> <img id="image_5" class='img' src="/images/person1.jpg"> </div> <p id="p1">CORRECT: <span id="count1">0</span></p> <p id="p2">ERROR: <span id="count2">0</span></p>