Я пытаюсь сделать так, чтобы при нажатии на текст появлялся определенный текст. Но 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>
2
vittoria daelli 19 Сен 2018 в 23:33

2 ответа

Лучший ответ

Прежде всего, функция называется getElementsByClassName() - поэтому она не работает, вам там не хватает s.

Во-вторых, это возвращает NodeList, поэтому сначала выберите элемент, который вам нужно использовать

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

Если вам нужно выбрать один элемент по классу, вы также можете использовать document.querySelector('.class');

1
SomeRandomName 19 Сен 2018 в 20:41

У вас есть опечатка.

Функция называется getElementsByClassName, обратите внимание на S. Она возвращает массив элементов с этим классом.

Вы можете быть сбиты с толку, потому что функция getElementById не имеет множественного числа, поскольку все идентификаторы должны быть уникальными, в то время как классы могут использоваться для нескольких элементов.

// 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];

Я НАСТОЯТЕЛЬНО предлагаю взглянуть на консоль, чтобы исправить подобные ошибки в будущем.

1
dustytrash 19 Сен 2018 в 20:40