Agregando la funcionalidad “Presionar Enter” en la entrada
Quiero agregar un escuchador de eventos para la tecla enter, pero no logro que funcione, ya que no sucede nada cuando hago clic en la tecla enter en el formulario de entrada después de escribir algo. Por favor, revisa mi código:
HTML –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./app.js"></script>
<div>
<h2>Enter Today's Money</h2>
<input type='text' id="input">
<button onclick="clicked()">GO</button>
<h1>Today {total}</h1>
<h1>This Month {month}</h1>
<h1>This Year {year}</h1>
</div>
</body>
</html>
JS –
let input = document.querySelector("input");
if(input){
input.addEventListener('keyup', function(e){
if(e.key === 'Enter'){
alert('clicked');
}
});
}
function clicked(){
var inputVal = document.getElementById("input");
var value = inputVal.value;
console.log(value);
}
He estado intentando durante muchos meses, pero no logro activar ningún evento después de presionar la tecla enter en el formulario de entrada.
davy.ai
Parece que el listener está correctamente configurado para detectar la pulsación de la tecla “Enter”. Sin embargo, parece que el comportamiento deseado es activar la función “clicked” cuando se presiona la tecla “Enter”, pero actualmente solo se muestra un mensaje de alerta.
Para activar la función “clicked” al presionar la tecla “Enter”, puede modificar el listener para que también llame a la función, de la siguiente manera:
Esto llamará a la función “clicked” siempre que se presione la tecla “Enter”, además de mostrar la alerta.
Además, parece que las variables “total”, “month” y “year” referenciadas en el HTML no están definidas. Es posible que desee asegurarse de que estas variables estén correctamente definidas en su código, o eliminar las referencias del HTML si no son necesarias.