всякий раз, когда изображение начинает удаляться, нажмите на него, и оно не остановится

#javascript #html #css

Вопрос:

Я сделал эту кнопку и добавил к ней Math.floor(Math.random() * 2 1), чтобы случайным образом давать неправильные и правильные значения. и я добавил 5 изображений в качестве жизни, которые всякий раз, когда я ошибаюсь, одно из изображений будет скрыто или удалено. но у меня возникают 2 проблемы: первая из них заключается в том, что всякий раз, когда изображение удаляется, оно не останавливается и удаляет все остальные изображения, не возвращаясь к математике.случайным образом. вторая проблема заключается в том, что, когда я получаю неправильный ответ, требуется несколько кликов, чтобы начать удалять изображения. Я пытался это исправить, но просто не мог понять! вы можете запустить код самостоятельно и попробовать его, если вы не поняли, о чем я говорю! если вы действительно поможете, пожалуйста, объясните мне, в чем была проблема!!

 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>

1. Итак, вы хотите, чтобы изображения уменьшались по одному при нажатии на кнопку?

2. я хочу, чтобы он удалил одно изображение, а затем дал мне одно правильное, как я хочу, чтобы оно делалось случайным образом @Invizi

Ответ №1:

Может быть, что-то в этом роде?

 //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 amp;amp; 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>