带按钮的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= ""> 

Answer 2

尝试将window.getComputedStyle()替换为e.style.display

 function togglevid() { var e = document.getElementById("movie"); e.style.display = window.getComputedStyle(e, null) .getPropertyValue("display") === "none" ? "block" : "none"; } 

 #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="toggle">