javascript - 未捕获的 TypeError 无法设置 null onclick 的属性 'src'

Question

我正在尝试弹出一个视频灯箱。它适用于一个视频。尝试使用多个视频时，第二个视频链接不起作用。单击时，我收到 Uncaught TypeError Cannot set property 'src' of null。 单击时没有任何反应，但 video1 在后台启动，您只能看到她的声音。如有任何帮助，我们将不胜感激。

JS 来了

// Function to reveal lightbox and adding YouTube autoplay
function revealVideo(div,video_id) {
  var video = document.getElementById(video_id).src;
  document.getElementById(video_id).src = video+'&autoplay=1'; // adding autoplay to the URL
  document.getElementById(div).style.display = 'block';
}

// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div,video_id) {
  var video = document.getElementById(video_id).src;
  var cleaned = video.replace('&autoplay=1',''); // removing autoplay form url
  document.getElementById(video_id).src = cleaned;
  document.getElementById(div).style.display = 'none';
}

这里是 html

    <a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
    <a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg" style="max-width:100%;max-height:100%"></a>

    <div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
        <div class="lightbox-container">
            <div class="lightbox-content">
                <button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
                <div class="video-container">
                    <iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&amp;controls=1&amp;showinfo=0%20frameborder=0" width="1280"></iframe>
                </div>
            </div>
        </div>
    </div>
    <div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
        <div class="lightbox-container">
            <div class="lightbox-content">
                <button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
                <div class="video-container">
                    <iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&amp;showinfo=0%20frameborder=0" width="1280"></iframe>
                </div>
            </div>
        </div>
    </div>

Answer 1

我认为您的问题是您多次使用 ID。
您在两个 anchor 标签上都有 id="playme" ，在两个 lightbox-div 上都有 id="video" 。