adding class for active elements

Question

In my project, I have one HTML with videos which worked just fine until I add the part with active class. I don't see where is mistake :( part with video working just fine but I always become a mistake that button container is 0 ... I would really appreciate any help because I am new in all of this and I make project for my final exam. here is only script code ..thnx in advance

window.onload = function() {

  const vid = document.getElementById('player');

  document.getElementById('play').onclick = function() {
    vid.play();
  };

  document.getElementById('pause').onclick = function() {
    vid.pause();
  };
  document.getElementById('full').onclick = function() {
    vid.requestFullscreen(); // Playback-Head-Position in Sekunden

  };

  const links = document.querySelectorAll('a.linkVideo');

  for (let i = 0; i < links.length; i++) {
    links[i].onclick = function(e) {
      e.preventDefault();

      vid.src = 'video/' + this.dataset.vid + '.mp4';
    }
  }
}

var btnContainer = document.getElementById("myDIV");
var btns = btnContainer.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";
  });
}

     <body>
    <main>

     </video>
     <div class="myDIV">
      <button class="button" id="play">Play</button>
      <button class="button" id="pause">Pause</button>
      <button class="button" id="full">Full Screen</button>
     <p id="ausgabe"></p>
     </div>
     <div id="videos">
      <a href="#" data-vid="vid01" class="linkVideo">Excersise Video 1</a>
      <a href="#" data-vid="vid02" class="linkVideo">Excersise Video 2</a>
      <a href="#" data-vid="vid03" class="linkVideo">Excersise Video 3</a>
    </div>
    </main>
    </body>

Answer 1

You have it set to 0 in the if statement, it needs to be i

if (current.length > 0) {
   current[i].className = current[i].className.replace(" active", "");
}

adding class for active elements

Question

1 answers

solution1
1 2019-05-17 19:10:53

adding class for active elements

Question

1 answers

solution1 1 2019-05-17 19:10:53

solution1
1 2019-05-17 19:10:53