0

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

我正在使用 4 divs - stop/ play/ loading/ pause，最后两个被隐藏（显示：无；）。当您单击后者（除了激活播放器）时，我想显示加载 div 而不是播放 div。然而，当我打电话时lyricsPlay("B")，document.getElementById("lyrics" + el + "1")似乎返回 null。

停止按钮关闭容器div（将包含播放器的弹出窗口），并停止播放器。这部分工作正常。

作为 javascript 的新手，我确信这是我的一个愚蠢的错误，但我完全找不到它在哪里。我已经阅读了很多关于getElementById()返回 null 的帖子，但似乎没有一个解决方案适用于我的情况。

下面是我的 HTML 代码，但你可以在这里摆弄它：

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>

4

1 回答 1

0

您正在传递一个元素，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';}
}

小提琴

于 2013-10-09T21:38:38.540 回答