简体   繁体   English

为活动元素添加类

[英]adding class for active elements

In my project, I have one HTML with videos which worked just fine until I add the part with active class. 在我的项目中,我有一个包含视频的HTML,在添加具有活动类的部件之前,它们的效果很好。 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 我看不出哪里有错误:(视频工作正常,但我总是会误以为按钮容器为0 ...我会非常感激任何帮助,因为我在这方面是新手,而且我为我制作项目期末考试,这里只是预先的脚本代码..thnx

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>

You have it set to 0 in the if statement, it needs to be i 您在if语句中将其设置为0,它需要为i

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM