Updating value of variable based on value of HTML input

user_13297529 0
Viewed 144

I have an HTML input that accepts only numbers and on my script file I have I variable that gets the value of the input. What I want to do is create another variable that is equal to the first variable. When I put a number on the input field the value of the numInput variable changes but not on the
value variable.
EDIT what I am trying to do is, I want to use the value of the value variable on some functions that I will make. 

const numInput = document.getElementById("input");
const value = numInput.value;
<header> 
   <input type="number" name="numInput" id="input" class="input" min="0" value="1" required>
</header>

html javascript
3 Answers

The reason value does not change is because it is saving a copy of the numInput.value content during the assignment, not a pointer or reference (something that I don't think you could do on JS). I would suggest using just using .valueAsNumber as suggested by @Sebastian Simon.

user_111170450

JS objects are the only things in JS that are not cloned in assignment to a new variable. This includes arrays.

Therefore, to mimic the behaviour, you will need to update your value upon every change, typically by adding an event listener. I've chosen to use the change event which will only fire upon blur if the value has changed of fields involving the keyboard and selection/alteration of range/date if the value has changed, though you could use the input event if you want it to change on every keypress, too. Have a quick read:

When doing this, the value can't be a constant, either, as it will change, so it must be a variable instead. I've opted for a let declaration for better code isolation, but by all means use var if you need more flexibility.

const numInput = document.getElementById("input");
let value = numInput.value;

numInput.addEventListener('change', () => {
    value = numInput.value;
});
user_12580340

To accomplish this, JavaScript needs to trigger a function when the input value of the HTML element has been changed. To do so, an event listener is needed.

Try changing the input value so you can see the code in action:

document.getElementById("input").addEventListener('input', function(){
    let inputNumber = this.value
    console.log('your variable value is: ' + inputNumber)
})
<header> 
   <input type="number" name="numInput" id="input" class="input" min="0" value="1" required>
</header>

user_148959850
Related