Comment obtenir une valeur de saisie en JavaScript
-
Utilisez
document.getElementById(id_name)pour obtenir la valeur d’entrée en JavaScript -
Utilisez
document.getElementsByClassName('class_name')pour obtenir la valeur d’entrée en JavaScript -
Utilisez
document.querySelector('selector')pour obtenir la valeur d’entrée en JavaScript
Nous pouvons obtenir la valeur de l’entrée sans l’encapsuler dans un élément de formulaire en JavaScript en sélectionnant l’élément d’entrée DOM et en utilisant la propriété value.
Le JavaScript a différentes méthodes pour sélectionner l’élément d’entrée DOM. Chaque méthode ci-dessous comporte un exemple de code, que vous pouvez exécuter sur votre machine.
Utilisez document.getElementById(id_name) pour obtenir la valeur d’entrée en JavaScript
Nous donnons la propriété id à notre élément d’entrée Dom, et ensuite nous utilisons document.getElementById(id_name) pour sélectionner l’élément d’entrée DOM, vous pouvez simplement utiliser la propriété value.
Exemple :
<!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>
Utilisez document.getElementsByClassName('class_name') pour obtenir la valeur d’entrée en JavaScript
Nous donnons la propriété de la classe à notre élément d’entrée Dom, et ensuite nous utilisons document.getElementsByClassName('class_name') pour sélectionner l’élément d’entrée DOM, mais si nous avons différents éléments d’entrée Dom avec le même nom de classe, alors il retournera un tableau d’entrées Dom, donc nous devrions spécifier lequel nous allons sélectionner en donnant le numéro d’index : document.getElementsByClassName('class_name')[index_number].value.
Exemple :
<!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>
Utilisez document.querySelector('selector') pour obtenir la valeur d’entrée en JavaScript
Le document.querySelector('selector') utilise des sélecteurs CSS ce qui signifie qu’il peut sélectionner des éléments par id, classe, nom de balise et propriété de nom de l’élément DOM.
Exemple :
document.querySelector('class_name')
document.querySelector('id_name')
document.querySelector('input') // tag name
document.querySelector('[name="domTextElement"]') // name property
Exemple :
<!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>