Цикл, доходя до кнопки останавливается, а по нажатию на нее продолжает работу

205

02 апреля 2017, 04:25

Что-то типа теста по математике для малышей. Есть форма на странице. В поля пользователь вводит количество примеров и в каких пределах выводить примеры (до 10, до 20 и т.п.).

Интересует как сделать цикл, который будет выводить примеры по очереди после нажатия на кнопку с вариантом ответа (неважно верный или нет)?

В приведенном примере формируется три примера на сумму не более 10. Примеры создаются, но показывает только последний. А как сделать чтобы показывались поочередно по нажатию на кнопку с ответом?

function summa(3,10){
  var count =0;
  while (count<3){
  var s=0;
  var firstAmp = Math.floor(Math.random()*10); //первое слогаемое
  var secondAmp = Math.floor(Math.random()*10); //второе слогаемое
  s=firstAmp+secondAmp ; //вычисляем сумму
  if (s>10 || s==0) {continue;} //если сумма больше 10 или равна 0 идем в начало цикла
  else{//выводим пример
    document.getElementById("primer").innerHTML = '<h1>' + firstAmp + " + " + secondAmp +'</h1>';               
  }
  var x= s+1;
  var y= s-1;
  var rand = Math.floor(Math.random()*3);
  var var1 = '<input type= "button" onclick=alert("Good") value =' + s + '>';
  var var2 = '<input type= "button" onclick=alert("Bad") value =' + x + '>';
  var var3 = '<input type= "button" onclick=alert("Bad") value =' + y + '>';
  if (rand==1){
    document.getElementById("button").innerHTML = var1 + var2 + var3;   
  }else if(rand==2){
    document.getElementById("button").innerHTML = var2 + var1 + var3;
  }else {
    document.getElementById("button").innerHTML = var3 + var2 + var1;
  }
  count++;
  }
}

Извиняюсь если вдруг не понятно. Если совсем просто то вот так:

for (var i=0; i<5; i++){
  alert ("i = "+i);
}

Здесь цикл прерывается алертом. А мне необходимо прерывание при ожидании одного из вариантов ответа. Спасибо.

Answer 1

Вы сформировали все три примера, но document.getElementById("button").innerHTML = ... полностью перетирает предыдущие оставляя лишь последний. Сделайте примерно так:

var examples = [];
while (examples.length < 3){
  var s = Math.floor(Math.random()*10) + 1; //сумма
  var firstAmp = Math.floor(Math.random()*10); //первое слогаемое
  var secondAmp = s - firstAmp; //второе слогаемое
  var test = '<h1>' + firstAmp + " + " + secondAmp +'</h1>';               
  var x= s+1;
  var y= s-1;
  var rand = Math.floor(Math.random()*3);
  var var1 = '<input type= "button" onclick=alert("Good") value =' + s + '>';
  var var2 = '<input type= "button" onclick=alert("Bad") value =' + x + '>';
  var var3 = '<input type= "button" onclick=alert("Bad") value =' + y + '>';
  if (rand==1){
    examples.push(test + var1 + var2 + var3);   
  }else if(rand==2){
    examples.push(test + var2 + var1 + var3);
  }else {
    examples.push(test + var3 + var2 + var1);
  }
}
document.getElementById("primer").innerHTML = examples.join('');