如何使用getElementByClassName使文本在Javascript中显示和重新出现？

当你点击某个文本时，我试图使某个文本出现。但是getElementByClassName由于某些原因无法工作。我不知道为什么？ 当然，这是一个我没有看到的小细节。 目标是当你点击“阅读更多”时，文本会出现，而“阅读更少”会再次消失。 它的3个项目具有相同的文本

    <ul class="item-list">

        <!-- Item 1 Start-->
        <li class="item item1">
            <img src="images/chromebookpro.jpg">
            <div class="item-text">
                <h2>Google Pixelbook</h2>
                <p class="pricing">Starting at $999</p>
                <p>The first high performance Chromebook with Google Assistent built in. Features a four-in-one design offering laptop, tablet, tent, and entertainment modes, an all day battery with fast charging, a sleek aluminum body, and an optional pen. </p>
                <p class="item-specs"> Key Specs</p>
                <a href="#" onClick="change()" class="read-more">Read More</a>

                <span style="display:none" class="read-less"> More Specs.<a href="" onClick="change()" >Read Less</a></span>
                <div class="item-text-specs">
                    <div class="item-list">
                        <div class="article">12.3" Quad HD LCD</div>
                        <div class="article">Intel processor&reg;</div>
                    </div>
                    <div class="item-list">
                        <div class="article">128/256/512 GB</div>
                        <div class="article">8/16 GB memory</div>
                    </div>
                </div>
            </div>
        </li>
        <!-- Item 1 End-->


    </ul>
</div>
<script type="text/javascript">
    var readMore = document.getElementByClassName("read-more");
    var readLess = document.getElementByClassName('read-less');

    function change() {
        if (readLess.style.display == 'none') {
            readMore.style.display = 'none';
            readLess.style.display = 'block';
        } else {
            readMore.style.display = 'none';
        }
    }
</script>

谷歌像素书
起价999美元
首款内置谷歌助手的高性能Chromebook。采用四合一设计，提供笔记本电脑、平板电脑、帐篷和娱乐模式，全天电池可快速充电，光滑的铝制机身，以及可选的笔

关键规格

更多规格。
12.3英寸四高清液晶显示器
英特尔处理器®；
128/256/512 GB
8/16 GB内存


var readMore=document.getElementByClassName（“读取更多”）；
var readLess=document.getElementByClassName（'read-less'）；
函数更改（）{
if（readLess.style.display=='none'）{
readMore.style.display='none'；
readLess.style.display='block'；
}否则{
readMore.style.display='none'；
}
}

您有一个打字错误

---

函数名为

getElementsByClassName

，注意S。它返回一个包含该类的元素数组

您可能会感到困惑，因为函数getElementById不是复数的，因为ID应该都是唯一的，而类可以用于多个元素

// Changed from getElement to getElements
// function will return an array, get the first element of that array
var readMore = document.getElementsByClassName("read-more")[0];
var readLess = document.getElementsByClassName('read-less')[0];

---

我强烈建议以后查看控制台以解决此类错误

首先，函数名为

getElementsByClassName（）

-这就是它不起作用的原因，您缺少一个

s

第二个是returs a，所以要选择第一个元素，就必须使用它

var readMore = document.getElementsByClassName("read-more")[0];

---

如果需要按类选择一个元素，还可以使用

document.querySelector（'.class'）；

函数名为

GetElementsByCassName

，请注意S。它返回一个包含该类的元素数组。您可能会感到困惑，因为函数

getElementById

不是复数的，因为ID应该是唯一的，而类可以在多个元素上使用。感谢错误捕获。但是，它仍然是唯一的sn不起作用。我甚至复制并粘贴了两个变量的确切文本getElementsByClassName按f12并阅读控制台。否则，如果它们没有错误，您将不得不解释什么

不起作用。

。我发布的示例答案适用于我，带有您的html。感谢您的建议@dustytrashAgain非常感谢@dustytrash！是的，下次我将检查我的console.log