How to assign to a variable, the value typed in an input element?-CodePudding

I have this html element

<label for="minV">Minimum value</label>
          <input
            
            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?

CodePudding user response：

Something like that will help?

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

Script

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

CodePudding user response：

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

CodePudding user response：

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  type="number" value="6" id="minV" onclick="this.select()" onchange="onChange()" />

CodePudding user response：

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  
  type="number" value="6" id="minV" min="6" />

<p >Minimum value: -</p>