I made this button, and added Math.floor(Math.random() * 2 + 1) to it to give wrong and correct randomly. and i added 5 images as lifes that whenever I get wrong one of the images will get hidden or removed. but I'm getting 2 problems: the first one is that whenever an image gets deleted it wont stop and it deletes all the other images without returning to the math.random. second problem is that when i get wrong answer it takes to clicks to start deleting the images. I've been trying to fix it but I just couldn't figure it out! you can run the code yourself and try it if you didnt understand what i ment! if you do help, pleas explain to me what was the problem!!
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>Something like this maybe?
//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>