Linking Event Handlers in forEach Loop Javascript NodeList

Question

I'm trying to link the event of two input types in a NodeList. I'm able to link a single pair of inputs but once I add more pairs, I'm unable to link them. What am I doing wrong?

var range = document.querySelectorAll(".inputRange");
var field = document.querySelectorAll(".inputNumber");
// console.log(range);
// console.log(field);

range.forEach(input => {
  input.addEventListener("input", e => {
    // console.log("RANGE EVENT: " +e.type)
    field.value = e.target.value;
  });
});
field.forEach(input => {
  input.addEventListener("input", e => {
    range.value = e.target.value;
  });
});


  Recipe
  Low
  
  
    
  
  Mid
  
  
    
  
  High

CertainPerformance · Accepted Answer

Iterate over only one of the collections, and inside the loop, get a reference to the linked input by navigating the nearby DOM, then add listeners to both:

document.querySelectorAll(".inputNumber").forEach((field) => {
  const range = field.parentElement.nextElementSibling.children[0];
  range.oninput = () => field.value = range.value;
  field.oninput = () => range.value = field.value;
});


  Recipe
  Low
  
  
    
  
  Mid
  
  
    
  
  High

Or you could reference the same index on the other collection:

const ranges = document.querySelectorAll(".inputRange");
document.querySelectorAll(".inputNumber").forEach((field, i) => {
  const range = ranges[i];
  range.oninput = () => field.value = range.value;
  field.oninput = () => range.value = field.value;
});


  Recipe
  Low
  
  
    
  
  Mid
  
  
    
  
  High

Linking Event Handlers in forEach Loop Javascript NodeList

Answers (1)

Related Questions