javascript - "Show more"链接以将更多文本附加到页面？

Question

有人可以帮我纠正并向我解释为什么我的用于在显示更多文本和更少文本之间切换的 JS 代码不起作用吗？我想让用户单击“显示更多”按钮来显示更多文本，并允许他们单击“显示更少”返回到原始状态。

HTML

<div class="content-section">
    <h1>Our Team</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt aut deleniti nihil quidem, maxime rem numquam ea quibusdam ut commodi hic fuga dolorum. Ab reprehenderit dolorem nemo error illo. Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem accusamus eum nam nobis officia?<a class="toggleButton" onclick="toggleText();" href="javascript:void(0);"> Show More </a>
        <p class="show-text"></p>
    </p>
</div>

JS

var status = "less"

function toggleText() {

    var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";

    if (status == "less") {
        document.getElementsbyClassName("show-text").innerHTML = introText;
        document.getElementsbyClassName("toggleButton").innerText = "Show Less"
        status = "more";
    } else if (status == "more") {
        document.getElementsbyClassName("show-text").innerHTML = "";
        document.getElementsbyClassName("toggleButton").innerText = "Show More";
        status = "less";
    }
}

Answer 1

有两个问题

• getElementsbyClassName 拼写错误，应该是 getElementsByClassName
• 使用索引器访问 getElementsByClassName 返回的给定集合中的元素。

Live Demo

var status = "less";

function toggleText() {

    var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";

    if (status == "less") {
        document.getElementsByClassName("show-text")[0].innerHTML = introText;
        document.getElementsByClassName("toggleButton")[0].innerText = "Show Less";
        status = "more";
    } else if (status == "more") {
        document.getElementsByClassName("show-text")[0].innerHTML = "";
        document.getElementsByClassName("toggleButton")[0].innerText = "Show More";
        status = "less";
    }
}