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

EN

    <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>