Wie nehme ich Benutzereingaben in HTML und setze sie als Variable in js?

Question

Wie würde ich Benutzereingabe von HTML nehmen und es auf eine Variable in Javascript setzen?

Dies ist, was ich versuche zu implementieren:

<p> 
    <label>how old are you?</label> 
    <form id="form" onsubmit="return false;"> 
     <input style=position:absolute;top:80%;left:5%;width:40%; type="number" id="userInput"> 
     <input style=position:absolute;top:50%;left:5%;width:40%; type="submit" onclick="age()"> 
    </form> 
    <script type="text/javascript"> 
     function age() 
     { 
     var input = document.getElementById("userInput"); 
     alert(input); 
     } 
     if(age<20) 
     { 
     alert(YOU ARE UNDER 20) 
     } 
    </script> 
    </p> 

Answer 1

Mit reinem JavaScript:

var input = document.getElementById('userInput'); 
alert(input.value); 

Mit jQuery:

var input = $('#userInput'); 
alert(input.val()); 

Um das zu erreichen, was Sie wollen:

function age() { 
    var input = document.getElementById('userInput'); 
    var age = parseInt(input.value); 

    if(age < 20) { 
    alert('YOU ARE UNDER 20'); 
    } 
} 

Answer 2

Verwendung document.getelementbyId

oder

document.getelementbyclassname

alert(document.getElementById("userinput"));

oder

alert(document.getElementsByClassName("classname"));

Answer 3

, was Sie erreichen wollen? wenn Sie Alter überprüfen, dann bewegen, wenn innerhalb Funktion

function age() 
    { 
    var age = document.getElementById("userInput").value; 
    if(age<20) 
    { 
     alert("YOU ARE UNDER 20") 
    } 
    } 

Answer 4

Es gibt einige Probleme in Ihrem Code mögen. Ich werde sie erklären. 1. Sie erstellen ein var input = document.getElementById("userInput"); Aber danach in Ihrem alert(input) gibt es das gesamte Objekt anstelle des Eingabewerts zurück. 2. Danach vergleichen Sie das Alter, das nicht definiert ist, weil Sie var age = input; nicht erstellt haben. Wenn Sie den Eingang < 20 vergleichen, wird es funktionieren. In Ihrer Warnung haben Sie keine doppelten Anführungszeichen ("") verwendet, um eine Zeichenfolge zu erstellen und diese Zeichenfolge zu alarmieren. Ich hoffe es ist jetzt klarer.

 function age() 
 
     { 
 
     var age = document.getElementById("userInput").value; 
 
     alert(age); 
 
     
 
     if(age<20) { alert("YOU ARE UNDER 20"); } 
 
     } 
 
    

<p> 
 
    <label>how old are you?</label> 
 
    <form id="form" onsubmit="return false;"> 
 
     <input style=position:absolute;top:80%;left:5%;width:40%; type="number" id="userInput"> 
 
     <input style=position:absolute;top:50%;left:5%;width:40%; type="submit" onclick="age()"> 
 
    </form> 
 
</p>

Answer 5

Versuchen unter

function age() 
 
     { 
 
     var input = document.getElementById("userInput").value;  
 
     if(input<20) { alert("YOU ARE UNDER 20"); } 
 
     }

<p> 
 
    <label>how old are you?</label> 
 
    <form id="form" onsubmit="return false;"> 
 
     <input type="number" id="userInput"> 
 
     <input style=position:absolute;top:50%;left:5%;width:40%; type="submit" onclick="age()"> 
 
    </form> 
 
</p>