Question

我正在尝试为媒体播放器创建自定义按钮。棘手的部分是我希望播放按钮成为一个“加载”按钮，以后会成为暂停按钮，但无论如何。

我正在使用4 div s - 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>

Answer 1

您正在将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';}
}

getElementByID返回null（jsfiddle里面）

1 个答案:

Fiddle