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

<div  id="cbWrapper2">
    <input type="number" name="message_average"  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?

CodePudding user response：

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  id="cbWrapper2">
    <input type="number" name="message_average"  id="id_message_average">
</div>

CodePudding user response：

For that you have add event listener.

let userInput = document.getElementById("id_message_average");
userInput.addEventListener("input", (e)=> {
console.log(e.target.value)
})'

CodePudding user response：

You can use onClick function. If you choose onClick then you must need a button. Here is the example,

<form>
  <div  id="cbWrapper2">
    <input type="number" name="message_average"  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>