How to show the closest div id for a given input number?

Question

Let's say I have the following input field:

<input id="inputField" type="number" value="">

and some divs such as:

<div id="1000"></div>
<div id="1200"></div>
<div id="1500"></div>
<div id="1900"></div>
...

When the user enters a number in the input field, I want my code to go to the closest div identifier to that number.

For example: if the user enters 1300, then show the div with id = "1200".

What is the most efficient way to implement this in javascript, given that there will be a large number of divs?

Now I am doing:

<script>
        function myFunction() 
        {
            var x = document.getElementById("inputField").value;

            if(x >= 1750 && x <= 1900) 
            {
                window.location.hash = '#1800';
            }
        }
</script>

Answer 1

, div div, ( , "" ); div javascript.

JavaScript:

// Get all the divs with numbers, if they are children of div, id="numbers"
let children = document.getElementById('numbers').children;

let array = [];
for (i = 0; i < children.length; i++) {
    // Append the integer of the id of every child to an array
    array.push(parseInt(children[i].id));
}

// However you are getting your input number goes here
let number = 1300  // Replace
currentNumber = array[0]
for (const value of array){
    if (Math.abs(number - value) < Math.abs(number - currentNumber)){
        currentNumber = value;
    }
}

// You say you want your code to go to the nearest div,
// I don't know what you mean by go to, but here is the div of the closest number
let target = document.getElementById(currentNumber.toString());

, .

Demo

function closestNum() {

  let children = document.getElementById('numbers').children;

  let array = [];
  for (i = 0; i < children.length; i++) {
    array.push(parseInt(children[i].id));
  }

  let number = document.getElementById('inputnum').value;
  currentNumber = array[0]
  for (const value of array) {
    if (Math.abs(number - value) < Math.abs(number - currentNumber)) {
      currentNumber = value;
    }
  }

  let target = document.getElementById(currentNumber.toString());

  document.getElementById('target').innerHTML = target.innerHTML;
}

<div id="numbers">
  <div id="1000">1000</div>
  <div id="2000">2000</div>
  <div id="3000">3000</div>
  <div id="4000">4000</div>
  <div id="5000">5000</div>
</div>

<br />
<input type="text" id="inputnum" placeholder="Input Number" onchange="closestNum()" />

<br />
<br /> Target:
<div id="target"></div>

Hide result

Answer 2

. div ID. , div, .

document.getElementById("inputField").addEventListener("change", function(){

   var divs = document.getElementsByTagName("div");
   var closestDiv = -1;
   var inputId = document.getElementById("inputField").value;
   for(var i=0; i<divs.length; i++)
   {
      if(Math.abs(inputId - closestDiv) > Math.abs(inputId - divs[i].id) || closestDiv == -1)
      {
         closestDiv = divs[i].id;
         for (var x = 0; x < divs.length; x++) {
            divs[x].style.display = 'none';        
         }
         divs[i].style.display = "block";
      }
    }
});

Live: jsfiddle.net

Answer 3

With some optimization, this should be fine -

var element;
document.addEventListener("change",
function(evt){
if(element && element.classList){
element.classList.remove("selected", false); 
element.classList.add("unselected", true); 

}
var listOfDivs = 
document.querySelectorAll(".unselected");


var val = evt.target.value;

var leastAbs=listOfDivs[0].id;


for(let anIndex=0, len=listOfDivs.length;anIndex<len;anIndex++){
       
       if(Math.abs(listOfDivs[anIndex].id-val)<leastAbs){
       leastAbs = Math.abs(listOfDivs[anIndex].id-val);
       element = listOfDivs[anIndex];
       }
}
element.classList.remove("unselected");
element.classList.add("selected");

});

.selected{
  background-color:red;
}
.unselected{
  background-color:yellow;
}

.unselected, .selected{
  width:100%;
  height:50px;
}

<input id="inputField" type="number" value="">


<div id="1000" class='unselected'>1</div>
<div id="1200" class='unselected'>2</div>
<div id="1500" class='unselected'>3</div>
<div id="1900" class='unselected'>4</div>

Run codeHide result