How to avoid repetitions in Javascript for multiple links

i want to make it so that when you press a video link on the page it will change the source of an iframe video.

This is what works right now:

// Video links

 const videoLinks = {
  m1: "https://www.youtube-nocookie.com/embed/myvideo",
  m2: "https://www.youtube-nocookie.com/embed/myvideo",
  m3: "https://www.youtube-nocookie.com/embed/myvideo",
  m4: "https://www.youtube-nocookie.com/embed/myvideo",
  m5: "https://www.youtube-nocookie.com/embed/myvideo",
  m6: "https://www.youtube-nocookie.com/embed/myvideo",
  m7: "https://www.youtube-nocookie.com/embed/myvideo",
  m8: "https://www.youtube-nocookie.com/embed/myvideo",
  m9: "https://www.youtube-nocookie.com/embed/myvideo",
  m10: "https://www.youtube-nocookie.com/embed/myvideo",
  m11: "https://www.youtube-nocookie.com/embed/myvideo",
  m12: "https://www.youtube-nocookie.com/embed/myvideo",
  m13: "https://www.youtube-nocookie.com/embed/myvideo",
  m14: "https://www.youtube-nocookie.com/embed/myvideo",
  m15: "https://www.youtube-nocookie.com/embed/myvideo",
  m16: "https://www.youtube-nocookie.com/embed/myvideo",
  m17: "https://www.youtube-nocookie.com/embed/myvideo",
  m18: "https://www.youtube-nocookie.com/embed/myvideo",
  m19: "https://www.youtube-nocookie.com/embed/myvideo",
};

// Music playlist links

document.getElementById("m1").addEventListener("click", function () {
  musicVideo.src = videoLinks.m1;
});

document.getElementById("m2").addEventListener("click", function () {
  musicVideo.src = videoLinks.m2;
});

document.getElementById("m3").addEventListener("click", function () {
  musicVideo.src = videoLinks.m3;
});

document.getElementById("m4").addEventListener("click", function () {
  musicVideo.src = videoLinks.m4;
});

document.getElementById("m5").addEventListener("click", function () {
  musicVideo.src = videoLinks.m5;
});

document.getElementById("m6").addEventListener("click", function () {
  musicVideo.src = videoLinks.m6;
});

document.getElementById("m7").addEventListener("click", function () {
  musicVideo.src = videoLinks.m7;
});

document.getElementById("m8").addEventListener("click", function () {
  musicVideo.src = videoLinks.m8;
});

document.getElementById("m9").addEventListener("click", function () {
  musicVideo.src = videoLinks.m9;
});

document.getElementById("m10").addEventListener("click", function () {
  musicVideo.src = videoLinks.m10;
});

document.getElementById("m11").addEventListener("click", function () {
  musicVideo.src = videoLinks.m11;
});

document.getElementById("m12").addEventListener("click", function () {
  musicVideo.src = videoLinks.m12;
});

document.getElementById("m13").addEventListener("click", function () {
  musicVideo.src = videoLinks.m13;
});

document.getElementById("m14").addEventListener("click", function () {
  musicVideo.src = videoLinks.m14;
});

document.getElementById("m15").addEventListener("click", function () {
  musicVideo.src = videoLinks.m15;
});

document.getElementById("m16").addEventListener("click", function () {
  musicVideo.src = videoLinks.m16;
});

document.getElementById("m17").addEventListener("click", function () {
  musicVideo.src = videoLinks.m17;
});

document.getElementById("m18").addEventListener("click", function () {
  musicVideo.src = videoLinks.m18;
});

document.getElementById("m19").addEventListener("click", function () {
  musicVideo.src = videoLinks.m19;
});

But it’s super long and i know it can be shorter, I’ve tried making a for loop but i can’t figure out the logic for how to type it, any suggestions is appreciated.

>Solution :

You should use arrays for such obviously repeating iterable things – there’s also a basic prefix of what the embed URL looks like, you just need to tack on the video-identity part (which you left out of your example). As long as you start your button IDs with 0 – the same as the index inside the array – you’re less likely to confuse which part belongs to which .. they should probably be generated by a loop based off the same array too – so that any changes to your set of videos immediately translates to more buttons.

const videoPrefix = 'https://www.youtube-nocookie.com/embed/';
const videoLinks = [ 'video-part-of-URL-for-index-0-number-1', 'vid-url-1-2', … ]; // the identifying part of the embed URL
const musicVideo = document.querySelector('#the-ID-of-the-player-element'); // fix this selector
for(let index = 0; index < 19; index++) // human [1 – 19], computer [0 - 18]
{
  document.querySelector("#m" + index).addEventListener("click", () => { musicVideo.src = videoPrefix + videoLinks[index]; } );
}