Eingabewert in JavaScript ändern
-
Ändern den Eingabewert mit der Eigenschaft
valuein JavaScript -
Ändern den Eingabewert mit der Funktion
setAttribute()in JavaScript
In diesem Tutorial wird erläutert, wie Sie den Eingabewert mithilfe der Eigenschaft value oder der Funktion setAttribute() in JavaScript ändern.
Ändern den Eingabewert mit der Eigenschaft value in JavaScript
Wir verwenden ein Eingabe-Tag, um Eingaben von einem Benutzer zu erhalten, und wir können die value-Eigenschaft verwenden, um den Eingabewert zu ändern. Zuerst müssen wir das Element abrufen, dessen Wert wir mithilfe seiner ID oder seines Namens ändern möchten, und dann können wir die value-Eigenschaft verwenden, um seinen Wert auf unseren gewünschten Wert zu setzen. Um ein Element in JavaScript zu erhalten, können wir die Funktion getElementById() oder querySelector() verwenden. Lassen Sie uns zum Beispiel ein Formular mit Eingabe erstellen und ihm eine ID geben, um das Element in JavaScript mithilfe von getElementById() abzurufen und seinen Wert mit der Eigenschaft value zu setzen. Siehe den Code unten.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.getElementById("123");
console.log(Myelement.value);
Myelement.value = "New value";
console.log(Myelement.value);
</script>
</html>
Ausgabe:
Some Value
New value
Im obigen Code haben wir die Funktion document.getElementById() verwendet, um das Element anhand seiner ID abzurufen, und in der nächsten Zeile haben wir den aktuellen Eingabewert mit der Funktion console.log() ausgegeben. Danach haben wir die value-Eigenschaft verwendet, um den Eingabewert auf unseren gewünschten Wert zu setzen, und danach haben wir den neuen Wert auf der Konsole gedruckt. Sie können auch mit der Funktion querySelector() das Element auswählen, dessen Eingabewert Sie ändern möchten. Wiederholen wir zum Beispiel das obige Beispiel mit der Funktion querySelector(). Siehe den Code unten.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.querySelector('input[name="ABC"]');
console.log(Myelement.value);
Myelement.value = "New value";
console.log(Myelement.value);
</script>
</html>
Ausgabe:
Some Value
New value
Im obigen Code haben wir die Funktion querySelector() verwendet, um das Element abzurufen.
Ändern den Eingabewert mit der Funktion setAttribute() in JavaScript
Wir können auch die Funktion setAttribute() anstelle der Eigenschaft value verwenden, um den Eingabewert zu setzen. Wir können auch die Funktion forms() anstelle der Funktion getElementById() oder querySelector() verwenden, um das Element anhand des Formularnamens und des Eingabenamens abzurufen. Wiederholen wir zum Beispiel das obige Beispiel mit den Funktionen setAttribute() und froms(). Siehe den Code unten.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form name="FormABC">
<input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.forms['FormABC']['ABC'];
console.log(Myelement.value);
Myelement.setAttribute('value','New value');
console.log(Myelement.value);
</script>
</html>
Ausgabe:
Some Value
New value
Wie Sie sehen, ist die Ausgabe all dieser Methoden gleich, sodass Sie je nach Ihren Anforderungen eine beliebige Methode verwenden können.
