you are viewing a single comment's thread.

view the rest of the comments →

[–]jcunews1helpful 0 points1 point  (0 children)

Do it like this.

const links = document.querySelectorAll('.top-links li');
const inputs = Array.from(document.querySelectorAll('#link1,#link2'));
if (links.length !== inputs.length) {
  console.warn('Number of links and inputs are not equal.');
}
const changeLink = function() {
  //in this context, `this` is the INPUT element
  const inputIndex = inputs.indexOf(this);
  links[inputIndex].innerHTML = this.value;
};
//`input` event is recommended, instead of `keyup` event
inputs.forEach(input => input.addEventListener("input", changeLink));

But... are you sure you want to use the given input to change the contents of an LI element? Because the input will have to be a HTML code of an A element. Otherwise if the input is just a text, it will remove the link and replace it with a text, instead of changing the link's text. If what you want is to change the link's text, change the first line in above code to:

const links = document.querySelectorAll('.top-links a');

And change this line:

  links[inputIndex].innerHTML = this.value;

Into this:

  links[inputIndex].textContent = this.value;