JavaScript, get the value of input field on entry

I have a HTML page with an input field that the user enters a value into. The HTML code looks like this:

<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>

I’m trying to use JavaScript to get the value entered by the user so that I can then compare it against another value and write out the result, but I’m not sure how I collect the initial value being entered. What I have so far:

<script>
  var value = document.getElementById("id_message_average").value;
  console.log(value);
</script>

I’m just trying to write the value out for now so that I can tell it’s working. Do I need to put it into some kind of event listener maybe when the user clicks onto another input field, or is there a way to have the script fire when a character is added?

Answer

There are indeed events to use to listen to changes in the input. One of them is called input, and you can use it like below.

The input event fires when the value of an <input>, <select>, or <textarea> element has been changed. More on MDN’s doc.

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>

Advertisement

Answer