Funktion zum Schreiben aller geraden Zahlen aus dem Formular

Question

Ich habe HTML-Form von 16 Feldern. Der Benutzer gibt die Nummer in jedes Feld ein und die Funktion muss nur gerade Zahlen sortieren und anzeigen.

// JS-Funktion für gerade Zahlen und den Druck in Absatz //

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; 
     } 
    } 
    } 

Nachdem ich in Form füllen, kann ich Text und Wert, aber nur letzte.

Frage: Wie bekomme ich Funktion, mir alle geraden Zahlen in einer Zeile zu schreiben?

Beispiel: 2,4,6,8 etc ...

Was muss ich eingeben oder diese Funktion ändern. Vielen Dank an alle im Voraus

Answer 1

Zu allererst Ihre else ist innerhalb von if Aussage, die falsch ist. Stellen Sie sicher, dass Sie keine continue; in Ihrer for-Schleife hinzufügen müssen, da Sie nur eine Aktion ausführen.

Überprüfen Sie auch, dass alle Zahlen, die von den Formulareingaben kommen, sind Strings, als Sie Zahlen mit Unary plus (+) operatorvar num = +numbers[i].value;

Schließlich bekommen haben, habe ich ein Array erstellt evenNumbers alle geraden Zahlen zu sammeln und auf der Grundlage, dass Sie zeigen Sie eine Nachricht mit einem ternären Operator bis - Wie die Zahlen in einer Reihe sind, können Sie sie mit Array.prototype.join()evenNumbers.join(', ')

-Code beitreten können:

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>

Wenn Sie

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

schreiben macht alles Werte schreiben, aber der Wert ersetzt wird, wenn er die nächste gerade Zahl findet. Sie ersetzen den Text, anstatt sie zu verketten,

Ändern Sie diese Zeile

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

zu

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

Answer 3

innerHTML überschreibt Ihr Ergebnis jedes Mal Ihre Schleife ausführt. Versuchen Sie folgendes:

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

Answer 4

Es ist keine gute Idee, Berechnung zu mischen mit DOM ändert, könnten Sie evenNumbers für verschiedene Anwendungsfälle müssen auch:

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; 
    } 

es wie folgt verwendet:

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

Beachten Sie, dass dies ein allgemeiner Ansatz ist, bei dem Sie die Nummern weitergeben können und somit Ihre function auch woanders wiederverwenden können.

Answer 5

Hier ist ein weiteres Arbeitsbeispiel:

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>