Javascript if/else on submit

Question

ich bin total neu bei Javascript und arbeite gerade an meinen ersten Funktionen. Ich habe diese 2 Texteingabebereich, wo man seinen Namen und sein Niveau setzen kann.

<form action="/action_page.php"> 
Nom: <input type="text" name="fullname"><br><br> 
Niveau (1 &aacute; 6): <input type="text" name="niveau"> 
<input type="submit" value="Afficher partie 2"> 
</form> 

Nach dem Absenden wird der Benutzer soll eine Nachricht mit seinem Namen und seiner Ebene gezeigt werden (wenn Ebene zwischen 1-6, sonst seine eine Fehlermeldung).

Dies ist, wie ich meinen Skript geschrieben:

<script> 
var x = oninput; 
var y = oninput; 
if (y>=1){ 
    document.write("Bonjour + 'x'"); 
    document.write("Niveau='y'"); 
}if (y<=6){ 
    document.write("Bonjour + 'x'"); 
    document.write("Niveau='y'"); 
} 
else { 
    document.write("<p style="color:red;">Erreur le niveau doit etre en 
    1 et 6</p> 
} 
</script> 

Ich wollte wissen, ob ich, dass der richtige Weg, schrieb ich auch kippt Figur, wie der Benutzer mit der Variablen X. seinem Namen zeigen

Ich habe auch ein Problem zu verstehen, wie Sie mein Skript mit dem Eingabefeld verknüpfen.

Answer 1

Versuchen Sie dieses, ich hoffe, es werde

auf dem Formular arbeitet,

<form name="form1" action="/action_page.php"> 
    Nom: <input type="text" name="fullname"><br><br> 
    Niveau (1 &aacute; 6): <input type="text" name="niveau"> 
    <input type="submit" value="Afficher partie 2" onclick="myFunction()"> 
</form> 

Auf Ihrem Skript

function myFunction() { 
    var x = document.form1.fullname.value; 
    var y = document.form1.niveau.value; 

    if (y >= 1 && y <= 6) { 
     document.write("Bonjour " +x); 
     document.write("Niveau=" +y); 
    } else { 
     document.write("<p style='color:red;'>Erreur le niveau doit etre en 
     1 et 6</p>"); 
    } 
} 

Answer 2

Ihr Javascript viele Fehler haben. Ich habe alles für dich aufgeräumt. Lesen Sie einfach die Kommentare durch, um zu verstehen, was der JS tut. Viel Spaß :)

function showmylevel(event) { 
 
    event.preventDefault(); // Prevent Form Actually Submitting 
 
    var x = document.getElementsByName('fullname')[0].value; // Get Value 
 
    var y = document.getElementsByName('niveau')[0].value; // Get Value 
 
    console.log(y); 
 
    if (y>0 && y<7){ 
 
     document.write("Bonjour "+x); // Display Name 
 
     document.write("<br>"); // Break Line 
 
     document.write("Niveau = "+y); // Display Level 
 
    } else { 
 
     // Display Error 
 
     document.write('<p style="color:red;">Erreur le niveau doit etre en 1 et 6</p>'); 
 
    } 
 
    return false; // Stop Form From Going Anywhere 
 
    }

<form action="action_page.php" onsubmit="showmylevel(event);"> 
 
Nom: <input type="text" name="fullname"><br><br> 
 
Niveau (1 &aacute; 6): <input type="text" name="niveau"><br><br> 
 
<input type="submit" value="Afficher partie 2"> 
 
</form>

Answer 3

Dies ist eine Version des Codes, der nicht vorlegen tut, sondern legt einen Event-Handler auf eine Schaltfläche und hängt dem DOM statt es neu zu schreiben. Fügt Event-Handler mit addEventListener hinzu, da das Einfügen von Click-Handlern in HTML als schlechte Form angesehen wird.

function do_stuff() { 
 
    var x = document.getElementsByName("fullname")[0].value; 
 
    var y = document.getElementsByName("niveau")[0].value; 
 
    if (parseInt(y)>=1 && parseInt(y)<=6){ 
 
    document.body.appendChild(document.createTextNode("Bonjour "+x)); 
 
    document.body.appendChild(document.createElement("br")); 
 
    document.body.appendChild(document.createTextNode("Niveau='"+y+"'")); 
 
    } 
 
    else { 
 
    var p = document.createElement('P'); 
 
    p.style.color = "red"; 
 
    p.appendChild(document.createTextNode("Erreur le niveau doit etre en 1 et 6")); 
 
    document.body.appendChild(p); 
 
    } 
 
} 
 

 
document.addEventListener("DOMContentLoaded", function() { 
 
    for(let input of document.getElementsByTagName("input")) { 
 
    if (input.type == "button") { input.addEventListener("click", do_stuff); } 
 
    } 
 
}, false);

<form> 
 
Nom: <input type="text" name="fullname"><br><br> 
 
Niveau (1 &aacute; 6): <input type="text" name="niveau"> 
 
<input type="button" value="Afficher partie 2"> 
 
</form>