Wie man Eingabewerte in JavaScript erhält
-
Verwenden Sie
document.getElementById(id_name), um den Eingabewert in JavaScript zu erhalten -
Verwenden Sie
document.getElementsByClassName('class_name'), um den Eingabewert in JavaScript zu erhalten -
Verwenden Sie
document.querySelector('selector'), um den Eingabewert in JavaScript zu erhalten
Wir können den Wert der Eingabe erhalten, ohne sie in ein Formular-Element in JavaScript einzuhüllen, indem wir das DOM-Eingabe-Element auswählen und die Eigenschaft value verwenden.
JavaScript hat verschiedene Methoden zur Auswahl des DOM-Eingabeelements. Jede Methode unten hat ein Codebeispiel, das Sie auf Ihrem Rechner ausführen können.
Verwenden Sie document.getElementById(id_name), um den Eingabewert in JavaScript zu erhalten
Wir geben unserem Dom-Eingabeelement die Eigenschaft id und verwenden dann document.getElementById(id_name), um das DOM-Eingabeelement auszuwählen, Sie können einfach die Eigenschaft value verwenden.
Beispiel:
<!DOCTYPE html>
<html>
<body>
<h4>
Change the text of the text field
,and then click the button.
</h4>
<label for="domTextElement">Name: </label>
<input type="text" id="domTextElement" >
<button type="button" onclick="getValueInput()">
click me!!
</button>
<p id="valueInput"></p>
<script>
const getValueInput = () =>{
let inputValue = document.getElementById("domTextElement").value;
document.getElementById("valueInput").innerHTML = inputValue;
}
</script>
</body>
</html>
Verwenden Sie document.getElementsByClassName('class_name'), um den Eingabewert in JavaScript zu erhalten
Wir geben die Klasseneigenschaft an unser Dom-Eingabeelement und verwenden dann document.getElementsByClassName('class_name'), um das DOM-Eingabeelement auszuwählen, aber wenn wir verschiedene Dom-Eingabeelemente mit demselben Klassennamen haben, dann wird ein Array von Dom-Eingaben zurückgegeben, also sollten wir angeben, welches wir auswählen, indem wir die Indexnummer angeben: document.getElementsByClassName('class_name')[index_number].value.
Beispiel:
<!DOCTYPE html>
<html>
<body>
<h4>
Change the text of the text field
,and then click the button.
</h4>
<input type="text" class="domTextElement" >
<label for="domTextElement">Name: </label>
<input type="text" class="domTextElement" >
<button type="button" onclick="getValueInput()">
click me!!
</button>
<p id="valueInput"></p>
<script>
const getValueInput = () =>{
let inputValue = document.getElementsByClassName("domTextElement")[1].value;
document.getElementById("valueInput").innerHTML = inputValue;
}
</script>
</body>
</html>
Verwenden Sie document.querySelector('selector'), um den Eingabewert in JavaScript zu erhalten
Der document.querySelector('selector') verwendet CSS-Selektoren, d.h. er kann Elemente nach id, Klasse, Tag-Name und name property des DOM-Elements auswählen.
Beispiel:
document.querySelector('class_name')
document.querySelector('id_name')
document.querySelector('input') // tag name
document.querySelector('[name="domTextElement"]') // name property
Beispiel:
<!DOCTYPE html>
<html>
<body>
<h4>
Change the text of the text field
,and then click the button.
</h4>
<input type="text" id="domTextElement1" >
<label for="domTextElement">Name: </label>
<input type="text" class="domTextElement2" >
<button type="button" onclick="getValueInput()">
click me!!
</button>
<p id="valueInput"></p>
<script>
const getValueInput = () =>{
let inputValue1 = document.querySelector("#domTextElement1").value;
let inputValue2 = document.querySelector(".domTextElement2").value;
document.querySelector("#valueInput").innerHTML = `First input value: ${inputValue1} Second Input Value: ${inputValue2}`;
}
</script>
</body>
</html>