Cómo obtener el valor de entrada en JavaScript
-
Usa
documento.getElementById(id_name)para obtener el valor de entrada en JavaScript -
Usa
document.getElementsByClassName('class_name')para obtener el valor de entrada en JavaScript -
Usar
document.querySelector('selector')para obtener el valor de entrada en JavaScript
Podemos obtener el valor de la entrada sin envolverlo dentro de un elemento de forma en JavaScript seleccionando el elemento de entrada DOM y usando la propiedad value.
JavaScript tiene diferentes métodos para seleccionar el elemento de entrada DOM. Cada método a continuación tendrá un ejemplo de código, que puede ejecutar en su máquina.
Usa documento.getElementById(id_name) para obtener el valor de entrada en JavaScript
Le damos la propiedad id a nuestro elemento de entrada DOM, y luego usamos document.getElementById(id_name) para seleccionar el elemento de entrada DOM, puedes usar simplemente la propiedad value.
Ejemplo:
<!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>
Usa document.getElementsByClassName('class_name') para obtener el valor de entrada en JavaScript
Le damos la propiedad de la clase a nuestro elemento de entrada Dom, y luego usamos document.getElementsByClassName('class_name') para seleccionar el elemento de entrada DOM, pero si tenemos diferentes elementos de entrada Dom con el mismo nombre de clase, entonces devolverá un array de entradas Dom, por lo que debemos especificar cuál seleccionaremos dando el número de índice: document.getElementsByClassName('class_name')[index_number].value.
Ejemplo:
<!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>
Usar document.querySelector('selector') para obtener el valor de entrada en JavaScript
El document.querySelector('selector') utiliza selectores CSS, lo que significa que puede seleccionar elementos por id, clase, nombre de etiqueta y propiedad del nombre del elemento DOM.
Ejemplo:
document.querySelector('class_name')
document.querySelector('id_name')
document.querySelector('input') // tag name
document.querySelector('[name="domTextElement"]') // name property
Ejemplo:
<!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>