JavaScript 切换按钮

Question

所以我有一个按钮，它可以切换和显示视频。如果再次单击，它将隐藏它并不断隐藏它。它工作正常，唯一的问题是当你第一次点击它时你必须点击它两次，出于某种原因我似乎无法弄明白。

function togglevid() {
    var e = document.getElementById("movie");
    if (e.style.display == 'none') e.style.display = 'block';
    else e.style.display = 'none';
    if (e.pause == false) e.pause()
    else e.pause()
}

#movie {
    position:absolute;
    top:158px;
    left:470px;
    display:none;
    z-index:10
}

<video controls="" height="400" id="movie" oncontextmenu="return false;"
    width="960">
    <source src="" type="video/mp4">
    Your browser does not support HTML5 video.</video>

<input id="mcodebtn" onclick="togglevid()" type="button" value=
                "">

我认为此错误的原因是我将视频设置为显示:无；默认情况下。

Answer 1

尝试下面的代码，style 属性应该设置为display:none。

问题是您正在尝试访问 style 属性，然后访问 display 值。但是第一次运行它时，video 标签没有设置任何 style 属性。

function togglevid() {
    var s = document.getElementById("newcode");
    var e = document.getElementById("movie");
    if (e.style.display == 'none') e.style.display = 'block';
    else e.style.display = 'none';
    if (s.style.display == 'none') s.style.display = 'block';
    else s.style.display = 'none';
    if (e.pause == false) e.pause()
    else e.pause()
}

#movie {
    position:absolute;
    top:158px;
    left:470px;
    display:none;
    z-index:10
}

<video controls="" 
       height="400" 
       id="movie" 
       oncontextmenu="return false;"
       width="960" 
       style="display:none;"><!-- Here we set a default value for style attr-->
    <source src="" type="video/mp4">
    Your browser does not support HTML5 video.</video>

<input id="mcodebtn" onclick="togglevid()" type="button" value=
                "">