Tengo una página HTML con un campo de entrada en el que el usuario ingresa un valor. El código HTML se ve así:
<div class="d-flex mg-b-0 mb-3" id="cbWrapper2"> <input type="number" name="message_average" class="form-control" id="id_message_average"> </div>Estoy tratando de usar JavaScript para obtener el valor ingresado por el usuario para poder compararlo con otro valor y escribir el resultado, pero no estoy seguro de cómo recopilo el valor inicial que se ingresa. Lo que tengo hasta ahora:
<script> var value = document.getElementById("id_message_average").value; console.log(value); </script>Solo estoy tratando de escribir el valor por ahora para que pueda decir que está funcionando. ¿Debo ponerlo en algún tipo de detector de eventos tal vez cuando el usuario hace clic en otro campo de entrada, o hay alguna forma de que el script se active cuando se agrega un personaje?
De hecho, hay eventos para usar para escuchar los cambios en la entrada. Uno de ellos se llama input y puede usarlo como se muestra a continuación.
El evento de entrada se activa cuando se cambia el valor de un elemento
<input>,<select>o<textarea>. Más en el documento de MDN.
var input = document.getElementById("id_message_average"); input.addEventListener("input", ()=>{ console.log(input.value) }); <div class="d-flex mg-b-0 mb-3" id="cbWrapper2"> <input type="number" name="message_average" class="form-control" id="id_message_average"> </div>Para eso, ha agregado un detector de eventos.
let userInput = document.getElementById("id_message_average"); userInput.addEventListener("input", (e)=> { console.log(e.target.value) })'Puede utilizar la función onClick . Si elige onClick, entonces debe necesitar un botón . Aquí está el ejemplo,
<form> <div class="d-flex mg-b-0 mb-3" id="cbWrapper2"> <input type="number" name="message_average" class="form-control" id="id_message_average"> </div> <button type='button' onclick="getInputValue()">Click me</button> </form> <script> function getInputValue() { var value = document.getElementById("id_message_average").value; console.log(value); } </script>