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.

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:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

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;
});

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>