Функция для записи всех четных чисел из формы

Question

У меня html-форма из 16 полей. Пользователь вводит число в каждом поле , и функция должна сортировать только четные числа и показывать их.

// функция JS для четных чисел и печати в пункте //

function evenNumbers() { 
    var numbers = document.getElementsByClassName("formInput"); 
    var i; 
    for (i = 0; i <= numbers.length - 1; i++) { 
    if (numbers[i].value % 2 == 0) { 
     document.getElementById("even").innerHTML = "Even numbers are: " + numbers[i].value; 
     else { 
     continue; 
     } 
    } 
    } 

После того как я заполнить форму, я получаю текст и значение, но только последний.

Вопрос: Как я могу получить функцию, чтобы написать мне все четные числа в одной строке ?

Пример: 2,4,6,8 и т.д. ...

Что я должен ввести или изменить эту функцию. Спасибо всем заранее

Answer 1

Прежде всего Ваш else находится внутри if заявления, что неправильно. Убедитесь, что нет необходимости добавлять continue; в ваш цикл for, поскольку вы выполняете только одно действие.

Также проверьте, что все числа, которые приходят от формы входов являются строками, чем вы должны получить номера с Unary plus (+) operatorvar num = +numbers[i].value;

Наконец, я создал массив evenNumbers собрать все четные числа, и на его основе можно показать вам сообщение с трехкомпонентной оператором - Как числа в массиве, вы можете присоединиться к ним с Array.prototype.join()evenNumbers.join(', ')

Код:

function evenNumbers() { 
 
    var numbers = document.getElementsByClassName('formInput'), 
 
     evenNumbers = []; 
 

 
    for (var i = 0, l = numbers.length - 1; i <= l; i++) { 
 
    var num = +numbers[i].value; 
 
    (num && num % 2 === 0) && evenNumbers.push(num); 
 
    } 
 

 
    document.getElementById('even').innerHTML = (evenNumbers.length) 
 
    ? 'Even numbers are: ' + evenNumbers.join(', ') 
 
    : 'There are no even numbers.'; 
 
}

input { 
 
    display: block; 
 
    margin: 2px; 
 
}

<form> 
 
    <input type="text" class="formInput"> 
 
    <input type="text" class="formInput"> 
 
    <input type="text" class="formInput"> 
 
    <input type="text" class="formInput"> 
 
    <input type="text" class="formInput"> 
 
    <input type="text" class="formInput"> 
 
    <input type="button" value="Show Even Numbers" onclick="evenNumbers()"/> 
 
</form> 
 

 
<hr> 
 
<p>Result: <span id="even"></span></p>

Answer 2

function evenNumbers() { 
 
    var numbers = document.getElementsByClassName("formInput"); 
 
    var i; 
 
    
 
    for (i = 0; i <= numbers.length - 1; i++) 
 
    { 
 
    if (numbers[i].value % 2 == 0) 
 
    { 
 
     document.getElementById("even").innerHTML += ", " + numbers[i].value; 
 
    } 
 
    } 
 
    
 
    document.getElementById("even").innerHTML = "Even numbers : " + document.getElementById("even").innerHTML; 
 
}

<input class="formInput" type="text"> 
 
<input class="formInput" type="text"> 
 
<input class="formInput" type="text"> 
 
<input class="formInput" type="text"> 
 
<input class="formInput" type="text"> 
 
<input class="formInput" type="text"> 
 
<input class="formInput" type="text"> 
 

 
<div id="even"></div> 
 

 
<button onclick="evenNumbers()">Find even</button>

Когда вы пишете

document.getElementById("even").innerHTML = "Even numbers are: " + numbers[i].value; 

Это делает запись всех значений, но значение заменяется, когда он находит следующий четное число. Вы заменяете текст вместо конкатенации его,

Изменить эту строку

document.getElementById("even").innerHTML = "Even numbers are: " + numbers[i].value; 

в

document.getElementById("even").innerHTML = "Even numbers are : " ; 
document.getElementById("even").innerHTML += ", " + numbers[i].value; 

Answer 3

innerHTML переписывает свой результат каждый раз, когда ваш цикл выполняется. Попробуйте это:

document.getElementById("even").innerHTML += "Even numbers are: " + numbers[i].value; 

Answer 4

Это не очень хорошая идея смешать расчет с изменения DOM, вам может понадобиться evenNumbers для различных сценариев использования, а также:

function evenNumbers(numbers) { 
    var i; 
    var result = []; 
    for (i = 0; i <= numbers.length - 1; i++) { 
    if (numbers[i].value % 2 == 0) { 
     result.push(numbers[i].value); 
    } 
    return result; 
    } 

Используйте это так:

document.getElementById("even").innerHTML = "Even numbers are: " + evenNumbers(document.getElementsByClassName("formInput")).join(","); 

Обратите внимание, что это общий подход, при котором вы можете передавать номера, и вы сможете повторно использовать свой function в другом месте.

Answer 5

Вот еще один рабочий пример:

function evenNumbers() { 
 
    document.getElementById('even').innerHTML = 
 
    'Even numbers are: ' + [...document.getElementsByClassName("formInput")] 
 
    .filter(x => x.value && x.value !== '0' && x.value % 2 == 0) 
 
    .map(x => x.value) 
 
    .join(', ') 
 
}

input {display: block;}

<input type="text" class="formInput"> 
 
<input type="text" class="formInput"> 
 
<input type="text" class="formInput"> 
 
<input type="text" class="formInput"> 
 
<br> 
 
<button onclick="evenNumbers()">Even Numbers</button> 
 
<br> 
 
<p id="even"></p>