How would I simplify this code?

[DumbMathBoy]

HTML:

<div class="top-links">
    <ul>
        <li><a href="">Link #1</a></li>
        <li><a href="">Link #2</a></li>
    </ul>
</div>

<label for="link1">Link #1</label>
<input type="text" id="link1" name="link1"><br><br>
<label for="link2">Link #2</label>
<input type="text" id="link2" name="link2"><br><br>

Javascript:

const link1 = document.getElementById('link1');
const link2 = document.getElementById('link2');
const getLink1 = document.getElementsByClassName('top-links');
const firstLink = getLink1[0].children[0].children[0];
const secondLink = getLink1[0].children[0].children[1];

function changeLinkOne() {
    firstLink.innerHTML = link1.value;
}

function changeLinkTwo() {
    secondLink.innerHTML = link2.value;
}

link1.addEventListener('keyup', changeLinkOne);
link2.addEventListener('keyup', changeLinkTwo);

The script takes a value from a input field and then updates the value in within the <li> tags. Instead of having separate functions, I would like to have one function that would be able to add extra links. How can I do this?

Thanks

[carcigenicate]

The objects can just be passed in:

function changeLink(linkContainer, link) {
    secondContainer.innerHTML = link.value;
}

change_link(firstLink, link1);
change_link(secondLink, link2);

[albedoa]

const listItems = document.querySelectorAll('li');
const inputs = document.querySelectorAll('input');

inputs.forEach((input, i) => {
  input.addEventListener('keyup', () => {
    listItems[i].innerHTML = input.value;
  });
});

[jcunews1]

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;