我正在尝试为媒体播放器创建自定义按钮。棘手的部分是我希望播放按钮成为一个“加载”按钮，后来成为一个暂停按钮，但无论如何。
我正在使用4个divs - stop / play / loading / pause，最后两个被隐藏（显示：无;）。当你点击后者时（除了激活播放器之外）我想显示加载div而不是play div。然而，当我打电话给lyricsPlay("B")时，document.getElementById("lyrics" + el + "1")似乎正在返回null。
容器div（将包含播放器的弹出窗口）关闭容器，并停止播放器。这部分工作正常。
在javascript方面几乎是一个新手，我敢肯定这是我的一个愚蠢的错误，但我完全失去了找到它的位置。我读过很多关于getElementById()返回null的帖子，但没有一个解决方案似乎适用于我的情况。
下面是我的HTML代码，但你可以摆弄它here：
function lyricsToggle(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'none') {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
function lyricsStop(videoID, divID) {
lyricsToggle(divID);
//jQuery('#lyrics' + videoID).tubeplayer('stop');
}
function lyricsPlay(el) {
var play = document.getElementById("lyrics" + el + "1"); //returns null??
var load = document.getElementById("lyrics" + el + "2"); //returns null??
lyricsToggle(play);
lyricsToggle(load);
//jQuery(video).tubeplayer("play");
}#container {
margin-top: 60px;
margin-right: 100px;
}
.lyricsPlay {
width: 30px;
height: 30px;
float: right;
background-color: green;
}
.lyricsStop {
width: 30px;
height: 30px;
float: right;
background-color: red;
}
.lyricsLoad {
width: 30px;
height: 30px;
float: right;
display: none;
background-color: blue;
}
.lyricsPause {
width: 30px;
height: 30px;
float: right;
display: none;
background-color: yellow;
}<body>
<div id="container">
<div id="lyricsB0" class="lyricsStop" onClick="lyricsStop('B', 'container')">
stop
</div>
<div id="lyricsB1" class="lyricsPlay" onClick="lyricsPlay('B')">
play
</div>
<div id="lyricsB2" class="lyricsLoad" onClick="lyricsLoad('B')">
loading
</div>
<div id="lyricsB3" class="lyricsPause" onClick="lyricsPause('B')">
pause
</div>
</div>
</body>您将div_id元素已经传递给lyricsToggle()：
var play = document.getElementById("lyrics" + el + "1");// as div_id
lyricsToggle(play);
所以不需要在lyricsToggle(div_id)中这样做：
var el = document.getElementById(div_id);
试试这个：
function lyricsToggle(div_id) {
var el = div_id; // and not: var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}