Modifier la valeur d'entrée en JavaScript
-
Modifier la valeur d’entrée à l’aide de la propriété
valueen JavaScript -
Modifier la valeur d’entrée à l’aide de la fonction
setAttribute()en JavaScript
Ce didacticiel abordera la modification de la valeur d’entrée à l’aide de la propriété value ou de la fonction setAttribute() en JavaScript.
Modifier la valeur d’entrée à l’aide de la propriété value en JavaScript
Nous utilisons une balise d’entrée pour obtenir l’entrée d’un utilisateur et nous pouvons utiliser la propriété value pour modifier la valeur d’entrée. Tout d’abord, nous devons obtenir l’élément dont nous voulons changer la valeur en utilisant son identifiant ou son nom, puis nous pouvons utiliser la propriété value pour définir sa valeur sur la valeur souhaitée. Pour récupérer un élément en JavaScript, on peut utiliser la fonction getElementById() ou la fonction querySelector(). Par exemple, créons un formulaire avec input et donnons-lui un identifiant pour obtenir l’élément en JavaScript à l’aide de getElementById() et définissons sa valeur à l’aide de la propriété value. Voir le code ci-dessous.
<!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>
Production:
Some Value
New value
Dans le code ci-dessus, nous avons utilisé la fonction document.getElementById() pour obtenir l’élément en utilisant son identifiant, et sur la ligne suivante, nous avons imprimé la valeur d’entrée actuelle en utilisant la fonction console.log(). Après cela, nous avons utilisé la propriété value pour définir la valeur d’entrée sur la valeur souhaitée, et après cela, nous avons imprimé la nouvelle valeur sur la console. Vous pouvez également utiliser la fonction querySelector() pour sélectionner l’élément dont vous souhaitez modifier la valeur d’entrée. Par exemple, répétons l’exemple ci-dessus en utilisant la fonction querySelector(). Voir le code ci-dessous.
<!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>
Production:
Some Value
New value
Dans le code ci-dessus, nous avons utilisé la fonction querySelector() pour obtenir l’élément.
Modifier la valeur d’entrée à l’aide de la fonction setAttribute() en JavaScript
Nous pouvons également utiliser la fonction setAttribute() au lieu de la propriété value pour définir la valeur d’entrée. Nous pouvons également utiliser la fonction forms() au lieu de la fonction getElementById() ou querySelector() pour obtenir l’élément en utilisant le nom du formulaire et le nom d’entrée. Par exemple, répétons l’exemple ci-dessus avec les fonctions setAttribute() et froms(). Voir le code ci-dessous.
<!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>
Production:
Some Value
New value
Comme vous pouvez le voir, la sortie de toutes ces méthodes est la même, vous pouvez donc utiliser la méthode de votre choix en fonction de vos besoins.
