Отображение всех значений внутри массива с помощью кнопки

Функция отображает все четные числа между начальным номером и конечным числом в зависимости от значения шага. Например, если я ввожу 1, 20 и 3. Я должен иметь 4, 10 и 16 как четное число.Отображение всех значений внутри массива с помощью кнопки

Мне нужно нажать все числа внутри массива evenNum в #result span.
В настоящее время, похоже, отображается только последнее четное число внутри массива.

Более того, если я хотел бы отобразить все четное число в вертикальной линии, как мне это сделать?

https://codepen.io/anon/pen/wgwaey

<body> 
    <div class="container"> 
     <h1>Sample</h1> 
    </div> 
    <div class="container"> 

     <label>Starting Number: </label> 
     <input id="startingNum" type="text"> 
     <br> 
     <label>Ending Number: </label> 
     <input id="endingNum" type="text"> 
     <br> 
     <label>Step: </label> 
     <input id="step" type="text"> 
     <br> 
     <button onclick="playButton()" id="play">Display Evens</button> 

    </div> 
    <div class="container"> 
     <p>Here are the even numbers between <span id="startNum"></span> and <span id="endNum"></span> by <span id="stepNum"></span>'s:</p> 
     <span id="result"></span> 
    </div> 
</body>

JS:

<script> 
     function playButton(){ 
      run(); 
     } 
     function run(){ 
      var x = parseInt(document.getElementById("startingNum").value); 
      var y = parseInt(document.getElementById("endingNum").value); 
      var z = parseInt(document.getElementById("step").value); 
      document.getElementById("startNum").innerHTML = x; 
      document.getElementById("endNum").innerHTML = y; 
      document.getElementById("stepNum").innerHTML = z; 
      var evenNum = []; 
      while (x < y){  
       if (x%2 == 0){ 
        evenNum.push(x); 
       } 
       x += z; 
       for (var i = 0; i<evenNum.length; i++){ 
        document.getElementById("result").innerHTML = evenNum[i]; 
       } 
      } 
     }   
</script>

источник

2016-12-30 FeCH

Вы могли бы просто динамически создать таблицу с любым количеством строк, в котором вы нуждаетесь (каждая из которых содержит одну ячейку в этом случае) и поместить значения в эти ячейки. Это создало бы простое вертикальное представление. Найдите «создать таблицу с JavaScript», и появится несколько примеров. Некоторые люди могут сказать вам «не использовать таблицы», я бы проигнорировал это как снобизм (посмотрите на источник этой страницы, он использует таблицы). Они широко используются, стабильны повсюду, включая мобильные, легко манипулируют с помощью CSS, и простое, простое, идеальное для начинающего, с которым можно учиться. –

Обратите внимание, что если пользователь вводит 0 или отрицательное число для шага, приложение будет иметь бесконечный цикл while. Вы действительно должны бросить чек вокруг этого и попросить пользователя ввести положительное число от 1 до n – mhodges

Еще одна вещь, о которой следует помнить, заключается в том, что выполнение 'parseInt()' на пустой строке возвращает NaN. Если вы замените 'parseInt' на' Math.round (Number ([ваше строковое значение здесь])) 'Вы не получите NaN, а ваши числа будут целыми. – mhodges

Проблема здесь:

for (var i = 0; i<evenNum.length; i++){ 
    document.getElementById("result").innerHTML = evenNum[i]; 
}

Вы должны переместить это из петли while и изменить его на

document.getElementById("result").innerHTML += ' ' + evenNum[i]; 
              //^add to existing

Или, проще говоря, удалить цикл for и положите это после петли while:

document.getElementById("result").innerHTML = evenNum.join(' ');

источник

2016-12-30 22:06:39

Ошибкой выше является то, что вы постоянно переустановкой внутреннего HTML результата, поэтому последний элемент даже NUM является только один отображается. Кроме того, вам не нужно обновлять результат внутри цикла while, вы можете сделать это, как только закончите поиск. Попробуйте это!

function playButton(){ 
    run(); 
} 
function run(){ 
    var x = parseInt(document.getElementById("startingNum").value); 
    var y = parseInt(document.getElementById("endingNum").value); 
    var z = parseInt(document.getElementById("step").value); 
    document.getElementById("startNum").innerHTML = x; 
    document.getElementById("endNum").innerHTML = y; 
    document.getElementById("stepNum").innerHTML = z; 
    var evenNum = []; 
    while (x < y){  
     if (x%2 == 0){ 
      evenNum.push(x); 
     }   
     x += z; 
    } 
    for (var i = 0; i<evenNum.length; i++){ 
     document.getElementById("result").innerHTML += "<p>" + evenNum[i] + "</p>"; 
    } 
}

источник

2016-12-30 22:06:39

Отображение всех значений внутри массива с помощью кнопки

ответ

Смежные вопросы