javascript - 无法弄清楚我的代码有什么问题（getElementsByClassName，Javascript 按钮）

Question

我在开发者社区还挺新的，不幸的是找不到我的问题的答案，即使我已经找了好几个小时了。

所以主要问题是，我想在文本中有一个“显示更多”按钮，它与 getElementById 一起工作得很好，因为它不适用于 ClassName。

请你帮助我好吗？

这是代码：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <span class="dots">...</span><span class="more"> quis nostrud exercitation ullamco laboris nisi ut aliquip.</p></span>
<button onclick="myFunction()" class="myBtn">Show more</button>

JS：

function myFunction() {
var dots = document.getElementsByClassName("dots");
var moreText = document.getElementsByClassName("more");
var btnText = document.getElementsByClassName("myBtn");

if (dots.style.display === "none") {
  dots.style.display = "inline";
  btnText.innerHTML = "Show more";
  moreText.style.display = "none";
}
else {
  dots.style.display = "none";
  btnText.innerHTML = "Show less";
  moreText.style.display = "inline";
}

}

提前感谢您的反馈。

标签： javascripthtml