Only one button javascript working, the other one does not play the provided video. How do i fix thi-CodePudding

I have been trying to make a script for my school project website which makes the buttons play a video, but for some reason it only works for the first one (btn). I am really not good at programming and made this through tutorials, I just need it for one school class. Can someone help me understand and fix the problem?

const btn = document.querySelector('.btn');
const videoContainer = document.querySelector('.video-containere');
const close = document.querySelector('.close');

btn.addEventListener('click', () => {
  videoContainer.classList.add('show');
})
close.addEventListener('click', () => {
  videoContainer.classList.remove('show');
})
const btn = document.querySelector('.btn2');
const videoContainer = document.querySelector('.video-container2');
const close = document.querySelector('.close');

btn.addEventListener('click', () => {
  videoContainer.classList.add('show');
})
close.addEventListener('click', () => {
  videoContainer.classList.remove('show');
})

.btn {
  text-decoration: none;
  padding: 15px 40px;
  background-color: #fff;
  color: #000000;
  border-radius: 40px;
  font-family: 'Century Gothic';
  font-weight: bolder;
}

.video-containere {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.video-containere .close {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 20px;
  cursor: pointer;
}

.video-containere video {
  width: 90%;
  max-width: 800px;
  transform: scale(0);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
  outline: none;
  transition: all 0.3s;
}

.video-containere.show {
  pointer-events: all;
  opacity: 1;
}

.video-containere.show video {
  transform: scale(1);
}

.btn2 {
  text-decoration: none;
  padding: 15px 40px;
  background-color: rgb(255, 122, 0);
  color: #fff;
  border-radius: 40px;
  font-family: 'Century Gothic';
  font-weight: bolder;
  box-shadow: 0 10px 40px rgba(255, 122, 0, 0.4);
}

.video-container2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: rgba(255, 122, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.video-container2 .close {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 20px;
  cursor: pointer;
}

.video-container2 video {
  width: 90%;
  max-width: 800px;
  transform: scale(0);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
  outline: none;
  transition: all 0.3s;
}

.video-container2.show {
  pointer-events: all;
  opacity: 1;
}

.video-container2.show video {
  transform: scale(1);
}

<div >
  <h1>Cristiano Ronaldo</h1>
  <p>Cristiano Ronaldo ist ein portugiesischer Fußballspieler, der seit Ende August 2021 zum zweiten Mal in seiner Karriere bei Manchester United unter Vertrag steht. </p>
  <a href="#" > Mehr... </a>
</div>

<div >
  <h1>Muhammad Ali</h1>
  <p>Muhammad Ali war ein US-amerikanischer Boxer und der einzige, der den Titel des unumstrittenen Weltmeisters dreimal in seiner Karriere gewinnen konnte. Bekannt wurde er zunächst unter seinem Namen Cassius Clay. Er gehörte zu den bedeutenden Schwergewichtsboxern
    und herausragenden Sportathleten des 20. </p>
  <a href="#" > Mehr... </a>
</div>

<div >
  <div >
    <span > &#10006; </span>
    <video src="CENSORED cause of private website" muted controls> </video>
  </div>
</div>

<div >
  <div >
    <span > &#10006; </span>
    <video src="CENSORED cause of private website" muted controls> </video>
  </div>
</div>

CodePudding user response：

You need to delegate

Note I moved the show to the modal and gave the links a data attribute to point at the relevant video. You COULD just change the video source and have ONE modal

document.getElementById('container').addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.matches(".btn")) {
    document.getElementById(tgt.dataset.id).classList.add("show")
  } else if (tgt.matches(".close")) {
    tgt.closest(".modal").classList.remove("show")
  }
})

.btn {
  text-decoration: none;
  padding: 15px 40px;
  background-color: #fff;
  color: #000000;
  border-radius: 40px;
  font-family: 'Century Gothic';
  font-weight: bolder;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.modal .close {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 20px;
  cursor: pointer;
}

.modal video {
  width: 90%;
  max-width: 800px;
  transform: scale(0);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
  outline: none;
  transition: all 0.3s;
}

.modal.show {
  pointer-events: all;
  opacity: 1;
}

.modal.show video {
  transform: scale(1);
}

.btn {
  text-decoration: none;
  padding: 15px 40px;
  background-color: rgb(255, 122, 0);
  color: #fff;
  border-radius: 40px;
  font-family: 'Century Gothic';
  font-weight: bolder;
  box-shadow: 0 10px 40px rgba(255, 122, 0, 0.4);
}

<div id="container">
  <div >
    <h1>Cristiano Ronaldo</h1>
    <p>Cristiano Ronaldo ist ein portugiesischer Fußballspieler, der seit Ende August 2021 zum zweiten Mal in seiner Karriere bei Manchester United unter Vertrag steht. </p>
    <a href="#"  data-id="vid1"> Mehr... </a>
  </div>

  <div >
    <h1>Muhammad Ali</h1>
    <p>Muhammad Ali war ein US-amerikanischer Boxer und der einzige, der den Titel des unumstrittenen Weltmeisters dreimal in seiner Karriere gewinnen konnte. Bekannt wurde er zunächst unter seinem Namen Cassius Clay. Er gehörte zu den bedeutenden Schwergewichtsboxern
      und herausragenden Sportathleten des 20. </p>
    <a href="#"  data-id="vid2"> Mehr... </a>
  </div>

  <div  id="vid1">
    <div >
      <span > &#10006; </span>
      <video src="CENSORED cause of private website" muted controls> </video>
    </div>
  </div>

  <div  id="vid2">
    <div >
      <span > &#10006; </span>
      <video src="CENSORED cause of private website" muted controls> </video>
    </div>
  </div>
</div>

CodePudding user response：

window.querySelector() only select the first macthed element in the dom tree. Try window.querySelectorAll() instead or any other selector