Javascript 未捕获类型错误：无法读取属性'；显示'；未定义的

我试图根据单击的按钮显示和隐藏几个div，但什么也没发生，在Chrome Inspector中我得到了错误：“uncaughtTypeError:无法读取未定义的属性'display'”

提前谢谢

触发器和块：

echo '<button class="more" onClick="toggleLyrics()">Show lyrics <i class="fa fa-chevron-down"></i></button>';
echo '<div class="lyricsBox" style="display: block;"><pre>' . $row['lyrics'] .'</pre></div>';

echo“显示歌词”；
回显“”$行[‘歌词’]。'；

脚本：

lyricsBox[0].style.display

函数toggleLyps（）{
var lyricsMore=document.getElementsByClassName（'more'）；
var lyricsBox=document.getElementsByClassName（“lyricsBox”）；
var displaySetting=lyricsBox.style.display；
如果（displaySetting=='block'）{
lyricsBox.style.display='none'；
}
否则{
lyricsBox.style.display='block'；
}
}

getElementsByClassName

返回通过索引访问的集合，以便找到DOM元素

您可以单独执行此操作：

var lyricsBox = document.querySelector(".lyricsBox");

或者在典型的

for

循环中

---

如果只需要匹配第一个元素，另一个选项是使用

querySelector

function toggleLyrics(){
var lyricsMore = document.getElementsByClassName('more');
var lyricsBox = document.getElementsByClassName("lyricsBox");

var displaySetting = lyricsBox[0].style.display;

if (displaySetting == 'block') { 
  lyricsBox[0].style.display = 'none';
}
else { 
  lyricsBox[0].style.display = 'block';
}
}

这将返回CSS选择器匹配的第一个元素。它还具有比

更好的浏览器支持。getElementsByClassName

---

它有一个对应的

.querySelectorAll（）

，它还返回一个集合。

getElementsByClassName

返回一个元素集合，首先需要从集合中获取元素

---

我想根据单击的div显示div（php代码打印几个div），for循环会这样做吗？如果是，for循环会是什么样子？很抱歉，问题可能不清楚，但会有几个div，但我只希望显示/隐藏特定的单击div

function toggleLyrics(){
var lyricsMore = document.getElementsByClassName('more');
var lyricsBox = document.getElementsByClassName("lyricsBox");

var displaySetting = lyricsBox[0].style.display;

if (displaySetting == 'block') { 
  lyricsBox[0].style.display = 'none';
}
else { 
  lyricsBox[0].style.display = 'block';
}
}