Alarm Javascript nicht, wenn Zyklus

Question

meine js arbeiten in Datei

function myFunction() { 

var component = (document.getElementById("component").value); 

var author = (document.getElementById("author").value); 

var version = (document.getElementById("version").value); 

var changelog = (document.getElementById("changelog").value); 

if (component == "" || author == "" || version == "" || changelog == "") { 

alert("Please Fill All Fields"); 

} else { 

    alert("submission Completed"); 

}} 

meine HTML-Datei

<form> 

     <h2>Insert Component:</h2> 

     <input id="component" type = "text" placeholder = "New Component"> 

     <h2>Author:</h2> 

     <input id="author" type = "text" placeholder = "Author Name"> 

     <h2>Version:</h2> 

     <input id="version" type = "text" placeholder = "New Version"> 

     <h2>Changelog:</h2> 

     <input id="changelog" type = "text" placeholder = ""> 
     <br> 
     <br> 
     <h1><input style="width:100px;height:30px;font-size: 20" name="submit" type = "button" onclick="myFunction()" value="Submit"></h1> 

     </form> 

auch wenn ich alle Formular ausfüllen Felder der zweite Alarm nicht angezeigt wird, immer die erste gezeigt ... kann mir jemand helfen? Ich kann wirklich nicht verstehen

Answer 1

Das Problem liegt daran, dass in dem Code:

<input id="component" type = "text" placeholder = "New Component"> 

die ID ist Komponente

und in dem Code, den Sie verwenden: Komponente Mitteilung über die Hauptstadt C. Und das gleiche gilt für alle Elemente. So sind Sie eigentlich nie gehen in if-Anweisung

aktualisieren:

Sie müssen auch alle() aus dem Code entfernen:

(document.getElementById("component").value); 

und wandeln sie in:

document.getElementById("component").value; 

<script> 
 
function myFunction() { 
 

 
var component = document.getElementById("component").value; 
 

 
var author = document.getElementById("author").value; 
 

 
var version = document.getElementById("version").value; 
 

 
var changelog = document.getElementById("changelog").value; 
 

 
if (component == "" || author == "" || version == "" || changelog == "") { 
 

 
alert("Please Fill All Fields"); 
 

 
} else { 
 

 
    alert("submission Completed"); 
 

 
}} 
 
</script> 
 

 
<form> 
 

 
     <h2>Insert Component:</h2> 
 

 
     <input id="component" type = "text" placeholder = "New Component"> 
 

 
     <h2>Author:</h2> 
 

 
     <input id="author" type = "text" placeholder = "Author Name"> 
 

 
     <h2>Version:</h2> 
 

 
     <input id="version" type = "text" placeholder = "New Version"> 
 

 
     <h2>Changelog:</h2> 
 

 
     <input id="changelog" type = "text" placeholder = ""> 
 
     <br> 
 
     <br> 
 
     <h1><input style="width:100px;height:30px;font-size: 20" name="submit" type = "button" onclick="myFunction()" value="Submit"></h1> 
 

 
     </form>

Answer 2

Korrekte IDS- (Komponente, Autor, Version, Changelog) erwartete Ergebnis zu erzielen

var component = (document.getElementById("component").value); 

var author = (document.getElementById("author").value); 

var version = (document.getElementById("version").value); 

var changelog = (document.getElementById("changelog").value); 

Codepen - http://codepen.io/nagasai/pen/JWKyjX für referece

Beide Warnungen nach korrekter IDs arbeiten

Problem:

Wert von Feldern ist immer leer wegen falscher ID-Werte, daher werden Sie gettin g nur die erste Warnung jedes Mal.

Answer 3

Ihr Code funktioniert gut, aber immer noch einige Beobachtungen:

• Keine Notwendigkeit ( & ) zu verwenden, während die Eingabewerte zu bekommen.
• Anstatt == zu verwenden, können Sie ! verwenden, während Sie für keinen Wert vergleichen.

Verwenden if (!component || !author || !version || !changelog) { ... } statt if (component == "" || author == "" || version == "" || changelog == "") { ... }

DEMO

function myFunction() { 
 
var component = document.getElementById("component").value; 
 

 
var author = document.getElementById("author").value; 
 

 
var version = document.getElementById("version").value; 
 

 
var changelog = document.getElementById("changelog").value; 
 

 
if (!component || !author || !version || !changelog) { 
 

 
alert("Please Fill All Fields"); 
 

 
} else { 
 

 
    alert("submission Completed"); 
 

 
} 
 
};

<form> 
 

 
     <h2>Insert Component:</h2> 
 

 
     <input id="component" type = "text" placeholder = "New Component"> 
 

 
     <h2>Author:</h2> 
 

 
     <input id="author" type = "text" placeholder = "Author Name"> 
 

 
     <h2>Version:</h2> 
 

 
     <input id="version" type = "text" placeholder = "New Version"> 
 

 
     <h2>Changelog:</h2> 
 

 
     <input id="changelog" type = "text" placeholder = ""> 
 
     <h1><input style="width:100px;height:30px;font-size: 20" name="submit" type = "button" onclick="myFunction()" value="Submit"></h1> 
 
     </form>