Thu. Sep 28th, 2023

[ANSWERED] html – Only one button javascript working, the other one does not play the provided video. How do i fix this?

By

Nov 18, 2022 css, html, javascript, video

Solution 1 :

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 class="content active">
    <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="#" class="btn" data-id="vid1"> Mehr... </a>
  </div>

  <div class="content">
    <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="#" class="btn" data-id="vid2"> Mehr... </a>
  </div>

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

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

Solution 2 :

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

Problem :

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 class="content active">
  <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="#" class="btn"> Mehr... </a>
</div>

<div class="content">
  <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="#" class="btn2"> Mehr... </a>
</div>

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

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

Comments

Comment posted by A Haworth

Look in your browser’s dev tools to see what JS errors you have (I think you should see you can’t reinitialise a const).

Comment posted by Robin Zigmond

@AHaworth great advice in general, but I don’t see any reinitialising of a

Comment posted by A Haworth

@RobinZigmond The fact that there is

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022