无法找出我的代码出了什么问题（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";
}

}

提前感谢您的反馈。