javascript - 未捕获的 ReferenceError：未定义切换

Question

当用户点击链接时，应该会出现切换功能

<a href="#" class="play"onclick="toggle()" ><img src="../MovieLandingPage/images/play.png">Watch Trailer</a>

视频部分是这样的——

<div class="trailer">
  <video src="../MovieLandingPage/video/joker-teaser-1_h1080p.mp4" controls="true"></video>
  <img src="../MovieLandingPage/images/close.png" class="close"onclick="toggle();>
</div>

toggle() 在 javaScript 中定义为

    function toggle(){
        var trailer = document.querySelector('.trailer');
       // var video = document.querySelector('.video');
        trailer.classList.toggle('active');
        // video.currentTime = 0;
        // video.pause();
    }

当我单击控制台中的链接时显示未定义切换单击后应执行 CSS-FILE

.trailer .active{
 visibility: visible;
 opacity: 1 ;
}

编辑上述片段

function toggle() {
  var trailer = document.querySelector('.trailer');
  // var video = document.querySelector('.video');
  trailer.classList.toggle('active');
  // video.currentTime = 0;
  // video.pause();
}

.trailer .active {
  visibility: visible;
  opacity: 1;
}

<div class="trailer">
  <a href="#" class="play" onclick="toggle()">Watch Trailer</a>
</div>

标签： javascripthtmljquerycss