CODEWITHSUNDEEP
javascripthtml
JacksWastedLife
JacksWastedLife

Reputation: 294

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?

Upvotes: 1

Views: 203

Answers (3)

Real Dewan
Real Dewan

Reputation: 41

For that you have add event listener.

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

Upvotes: 1

Soumik Ahammed
Soumik Ahammed

Reputation: 119

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

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

Upvotes: 0

Youssouf Oumar
Youssouf Oumar

Reputation: 45903

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>

Upvotes: 4

Related Questions