Когда value меньше p, содержимое исчезает и появляется

Question

При условии что value меншье p, должны исчезать input-ы но они исчезают и появляются.

document.querySelector(".r").oninput = function(){
    document.querySelector(".n").value = document.querySelector(".r").value

    let p = document.querySelectorAll(".p")

    for(let j=0;j<p.length;j++){
        if(document.querySelector(".n").value < p[j].value){
            p[j].style.display = "none"
        }
        else{
            p[j].style.display = "flex"
        }
    }
}

<input type="number" class = "n" value = "220000">
<input type="range" class = 'r' value = "220000" min = "0" max = "220000">
<input type="text" class = "p" value = "190000">
<input type="text" class = "p" value = "220000">
<input type="text" class = "p" value = "120000">
<input type="text" class = "p" value = "50000">

Answer 1

Потому что изначально .value сравнивались как строки (нп. '12' < '103' дало бы false).

When comparing values of different types, JavaScript converts the values to numbers.

Поэтому нам надо одну (любую) из переменных перевести в число.

document.querySelector(".r").oninput = function() {
  document.querySelector(".n").value = document.querySelector(".r").value

  let p = document.querySelectorAll(".p")

  for (let j = 0; j < p.length; j++) {
    if (parseInt(document.querySelector(".n").value) < p[j].value) {
      p[j].style.display = "none"
    } else {
      p[j].style.display = "flex"
    }
  }
}

<input type="number" class="n" value="220000">
<input type="range" class='r' value="220000" min="0" max="220000">
<input type="text" class="p" value="190000">
<input type="text" class="p" value="220000">
<input type="text" class="p" value="120000">
<input type="text" class="p" value="50000">

БЛОГ НА HUSL

Когда value меньше p, содержимое исчезает и появляется

Ответы (1 шт):