getElementByID returns null (jsfiddle inside)

getElementByID returns null (jsfiddle inside)

本文关键字：inside jsfiddle returns null getElementByID      更新时间：2023-09-26

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

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

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

在javascript方面几乎是一个新手，我确信这是我的一个愚蠢的错误，但我完全不知道它在哪里。我已经阅读了许多关于返回 null getElementById()的文章，但似乎没有一个解决方案适用于我的情况。

下面是我的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>

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

小提琴

相关文章：