Вывод div'ов через цикл for

294

05 апреля 2017, 16:05

Есть функция. В данной редакции она выводит три примера на сложение (+) с результатом не больше 10.

function summa(3,10){
  var examples = new Array();
  //1-й вариант
  //for (var i=0; i<3; i++){
  while (examples.length<3){
  //2-й вариант
  //for (var i=0; i<3; i++){
  var firstAmp = Math.floor(Math.random()*10); //первое слогаемое
  var secondAmp = Math.floor(Math.random()*10); //второе слогаемое
  var s=firstAmp + secondAmp; //сумма
  if (s>10){continue;}
  else {
  var test = '<h1>' + firstAmp + " + " + secondAmp +'</h1>';
  } 
  var x= s+1;
  var y= s-1;
  //3-й вариант
  //for (var i=0; i<3; i++){          
  var startTestForm = '<div id="testForm'+i+'">';
  var endTestForm = '</div>';
  var rand = Math.floor(Math.random()*3);
  //кнопки с вариантами ответов
  var var1 = '<input type= "button" onclick=document.getElementById("testForm' +i+'").style.display="none" value =' + s + '>';
  var var2 = '<input type= "button" onclick=document.getElementById("testForm' +i+'").style.display="none" value =' + x + '>';
  var var3 = '<input type= "button" onclick=document.getElementById("testForm' +i+'").style.display="none" value =' + y + '>';
  if (rand==1){
  examples.push(test + startTestForm + var1 + var2 + var3 + endTestForm);   
  }else if(rand==2){
  examples.push(test + startTestForm + var2 + var1 + var3 + endTestForm);
  }else {
  examples.push(test + startTestForm + var3 + var2 + var1 + endTestForm);
  }
  //}//это конец цикла for
  }
  //вывод примеров с кнопками ответов
  document.getElementById("primer").innerHTML = examples.join('');
  alert (examples.join(" !!! ")); //alert для контроля того, что попадает в examples
}

Есть цикл for для формирования div'ов с кнопками ответов. При нажатии на какой-либо вариант ответа кнопки исчезают. Правда есть одно "но". Лучший результат получается при третьем варианте расположения for: появляется необходимое количество div'ов с кнопками. При нажатии они исчезают. Но примеры везде одинаковые. (Цикл while не заходит на следующий круг) При первом и втором вариантах расположения появляется количество примеров больше указанного и div'ы нумеруются не по порядку и повторяются (div2, div0, div1, div3, div2 и т.п.). Хотя примеры разные. Подскажите, пожалуйста, где правильнее расположить цикл for. Спасибо.

Answer 1

Т.к. вы зараннее знаете, сколько вариантов вам нужно, то тут можно использовать for. Чтобы гарантировать генерацию корректного примера искользуйте while

function summa(variants, setSumm) { 
  var examples = []; 
  for (var i=0; i<variants; i++){ 
    var firstAmp,secondAmp,s; 
    do { 
      firstAmp = Math.floor(Math.random() * setSumm); //первое слогаемое 
      secondAmp = Math.floor(Math.random() * setSumm); //второе слогаемое 
      s = firstAmp + secondAmp; //сумма 
    } while(s > setSumm); // генерируем значения, пока они нам не подойдут 
     
    var test = '<h1>' + firstAmp + " + " + secondAmp + '</h1>'; 
    var x = s + 1; 
    var y = s - 1;           
    var startTestForm = '<div id="testForm' + i + '">'; 
    var endTestForm = '</div>'; 
    var rand = Math.floor(Math.random() * 3); 
    //кнопки с вариантами ответов 
    var var1 = '<input type= "button" onclick=document.getElementById("testForm' + i + '").style.display="none" value =' + s + '>'; 
    var var2 = '<input type= "button" onclick=document.getElementById("testForm' + i + '").style.display="none" value =' + x + '>'; 
    var var3 = '<input type= "button" onclick=document.getElementById("testForm' + i + '").style.display="none" value =' + y + '>'; 
    if (rand == 1) { 
      examples.push(test + startTestForm + var1 + var2 + var3 + endTestForm); 
    } else if (rand == 2) { 
      examples.push(test + startTestForm + var2 + var1 + var3 + endTestForm); 
    } else { 
      examples.push(test + startTestForm + var3 + var2 + var1 + endTestForm); 
    } 
    //}//это конец цикла for 
  } 
  //вывод примеров с кнопками ответов 
  document.getElementById("primer").innerHTML = examples.join(''); 
  alert(examples.join(" !!! ")); //alert для контроля того, что попадает в examples 
} 
summa(3, 10);