如何将输入元素中键入的值分配给变量？

Question

I have this html element

<label for="minV">Minimum value</label>
          <input
            class="inputCell"
            type="number"
            value="6"
            id="minV"
            onclick="this.select()"
          />

This is how I see it in the browser

I changed the value from 6 to 10. I want to assign the new value to a variable in js. If I'm doing this:

let min = Number(document.querySelector("#minV").value);

the 'min' variable will be always have value 6.

How can I assign to the variable 'min' the value that I have typed in the input element?

Answer 1

Use the min attribute. Additionally you can use a handler to assign a value (here to the global variable called min ) and keep that value above or equal to minimum on the value of the min-attribute. The snippet uses event delegation to handle stuff.

 let min = 6; // <= always 6 or up // listen to keyup/mouseup/-down events document.addEventListener(`keyup`, handle); document.addEventListener(`mousedown`, handle); document.addEventListener(`mouseup`, handle); function handle(evt) { // only act on input#minV if (evt.target.id === `minV` && /\d|backspace|delete|up|down/i.test(evt.key) || /^mouse/i.test(evt.type)) { const inp = evt.target; const inpMin = inp.getAttribute(`min`); // min magic here min = inp.value < +inpMin? inpMin: inp.value; // display value for demo document.querySelector(`.minValue`).textContent = `Minumum value: ${min}`; } }

 <label for="minV">Minimum value</label> <input class="inputCell" type="number" value="6" id="minV" min="6" /> <p class="minValue">Minimum value: -</p>

Answer 2

Something like that will help?

<label for="minV">Minimum value</label>
          <input
            class="inputCell"
            type="number"
            value="6"
            id="minV"
            onclick="this.select()"
            onchange="myFunction()"
          />

Script

var min = 6
function myFunction(){
    min = Number(document.querySelector("#minV").value)
}

Answer 3

You need to use addEventListener to listen the input's value change

For example:

 let minVofInput = document.querySelector('#minV'); let min = 6; // initial value minVofInput.addEventListener('input', function() { min = minVofInput.value; // assign input's value to variable min })

Answer 4

If you only call set min once that won't do, you need to keep updating min every time the input changes. Create a function that does what you want and call it from the input's onchange property (or set up an event listener, whatever you like).

 let min = undefined; function onChange() { const input = document.querySelector("#minV"); min = input.value; console.log(min); }

 <label for="minV">Minimum value</label> <input class="inputCell" type="number" value="6" id="minV" onclick="this.select()" onchange="onChange()" />