Asumiré que aún no conoces sobre los eventos y cómo capturar las teclas que presionamos.
Podemos hacer lo siguiente:
- Capturar a tu elemento input.
- Detectar al evento que ocurre en el input.
- Cuando escuchamos al evento, detectar si se presionó la tecla ENTER.
- Y cuando detectamos que se presionó, capturamos al valor del input.
Entonces, primero necesitamos saber qué son los eventos y cómo detectarlos.
Los eventos y listeners
Los eventos, son como unas notificaciones que hace el código, como decir que indica de que ocurrió algo en dicho elemento. Estos eventos lo podemos detectar con el método addEventListener()
.
Como dice su documentación:
addEventListener() Registra un evento a un objeto en específico. El Objeto especifico (en-US) puede ser un simple elemento en un archivo, el mismo documento , una ventana o un XMLHttpRequest. Para registrar más de un eventListener, puedes llamar addEventListener() para el mismo elemento pero con diferentes tipos de eventos o parámetros de captura.
Es decir, con addEventListener()
podemos escuchar los eventos que ocurre en cierto elemento, y una vez ocurra, se ejecutan dichas instrucciones.
Entonces, una vez entendemos esto, primero vamos a capturar a tus dos elementos, que son el input y tu botón:
let input = document.getElementById("guess-input"); // capturo al input
let button = document.getElementById("guess-button"); // capturo al botón
Tu elemento input está almacenado en la variable input
, y el botón, en la variable botón
.
Y ahora, vamos a agregarles los eventos.
Tu input, necesita ser escuchado cuando presionemos una tecla, que en este caso, es el ENTER, entonces, necesitaremos a keydown
:
input.addEventListener("keydown", function() {
//...
});
Aquí básicamente indico que cuando haga el evento keydown
en el input, es decir, cuando presione una tecla, llame al listener y ejecute la función de adentro.
Detectar las teclas que presionamos
Entonces, lo que necesitamos es capturar a la tecla ENTER, de la siguiente forma:
input.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
console.log(input.value);
}
});
Aquí paso como parámetro event
a la función, ya que nos vamos a apoyar del evento que ocurre en el input
. Posteriormente, indico que si la tecla que presioné es ENTER, cumplo con la condición if
y capturo el valor del input (con input.value
).
Y por último, con tu botón, hacemos lo siguiente:
button.addEventListener("click", function() {
console.log(input.value);
});
Que de seguro, ahora se te hará más fácil entender. Indico que si hacemos clic en el botón, llamo al listener y ejecuto la función de adentro, que hace lo mismo, capturar al valor del input con input.value
.
Código completo:
let input = document.getElementById("guess-input");
let button = document.getElementById("guess-button");
input.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
console.log(input.value);
}
});
button.addEventListener("click", function() {
console.log(input.value);
});
<body>
<h1>Title</h1>
<input type="text" id="guess-input" >
<button id="guess-button">Try</button>
<div id='grid'> </div>
<p id="guesses">
</body>