Читать дальше функциональность не работает с использованием ванильного JavaScript

Question

Я довольно новичок в JavaScript. Я пытаюсь создать функциональность read more / read less используя vanilla javascript, но у меня возникают проблемы. Всякий раз, когда я пытаюсь получить и изменить атрибут data-address, он дает мне неопределенную ошибку. Я не знаю, где я ошибаюсь.

Спасибо за помощь.

Вот код:

index.html

<div class="col s12" id="address-col">
    <p  class="address"  style="height:50px;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, illum Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas esse suscipit temporibus consectetur iure quasi magni tenetur quia reprehenderit nesciunt, a nobis, quidem autem consequatur, hic aperiam modi excepturi delectus quo odio quaerat. Sunt id illo praesentium dolorum, inventore iusto?
    </p>
    <span class="read-more" data-address="0">Read more</span>
</div>

app.js

    var read_more = document.querySelector(".read-more");// read more button
    console.log(read_more);
    var address_div = document.querySelector("#address-col");// content DIV
    console.log(address_div);
    var address_content = document.querySelector(".address"); // content under the DIV
    var intro_height = address_content.offsetHeight; // height of the content
    var address_flag = read_more.getAttribute("data-address"); // fetching attribute of the button
    console.log(address_flag);

    read_more.addEventListener("click",introexpand);
    function introexpand(){
        if(address_flag == 0){
            address_div.style.maxHeight= "none";
            address_div.style.overflow = 'none';
            address_flag=read_more.setAttribute("data-address", "1");
            console.log(address_flag);
        }
        else if(address_flag == 1){
            address_div.style.maxHeight= '12px'; 
            address_div.style.overflow = 'none';
            address_flag=read_more.setAttribute("data-address", "0");
            console.log(address_flag);

        }

    }    

Answer 1

Я надеюсь, что вы ожидаете, что вы получите что-то вроде ниже:

var read_more = document.querySelector(".read-more"); // read more button
console.log(read_more);
var address_div = document.querySelector("#address-col"); // content DIV
console.log(address_div);
var address_content = document.querySelector(".address"); // content under the DIV
var intro_height = address_content.offsetHeight; // height of the content
var address_flag = read_more.getAttribute("data-address"); // fetching attribute of the button
console.log(address_flag);
address_content.style.maxHeight = "18px";

read_more.addEventListener("click", introexpand);

function introexpand() {
  if (address_flag == 0) {
    address_content.style.maxHeight = "50px";
    address_flag = read_more.setAttribute("data-address", "1");
    address_flag = read_more.getAttribute("data-address");
    read_more.innerText = "Read less";
    // console.log(address_flag);
  } else if (address_flag == 1) {
    address_content.style.maxHeight = '18px';
    address_flag = read_more.setAttribute("data-address", "0");
    address_flag = read_more.getAttribute("data-address");
    read_more.innerText = "Read more";
    // console.log(address_flag);

  }

}

<div class="col s12" id="address-col">
    <p  class="address"  style="max-height:50px;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, illum Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas esse suscipit temporibus consectetur iure quasi magni tenetur quia reprehenderit nesciunt, a nobis, quidem autem consequatur, hic aperiam modi excepturi delectus quo odio quaerat. Skunt id illo praesentium dolorum, inventore iusto?
    </p>
    <span class="read-more" data-address="0">Read more</span>

Но я советую поиграть с этим примером: https://www.w3schools.com/howto/howto_js_read_more.asp, что намного лучше для "Read More Read Less Feature" и большинства людей. используя на своем сайте свои собственные настройки. Надеюсь, это поможет, спасибо :)

Answer 2

setAttribute() метод ничего не возвращает (что равно undefined значению).

Если вы хотите записать новое значение атрибута data-address, вам следует прочитать это еще раз: so:

            address_flag=read_more.setAttribute("data-address", "1");
            address_flag = read_more.getAttribute("data-address");
            console.log(address_flag);

Кроме того, вам следует переписать свою introexpand() функцию. Вы должны получить атрибут value address_flag в начале функции (потому что address_flag является переменной с данными простого типа [в данном случае это строка], и вы должны знать, что данные простого типа в JavaScript не имеют ссылочной характеристики, и вы делаетене получить наибольшее значение для этого конкретного атрибута):

    function introexpand(){
        address_flag = read_more.getAttribute("data-address");
        if(address_flag == 0){
            address_content.style.maxHeight= "0px";
            read_more.setAttribute("data-address", "1");
        }
        else if(address_flag == 1){
            address_content.style.maxHeight= '25px'; 
            read_more.setAttribute("data-address", "0");
        }
    }   

Более того:

• 'none' для css overflow не существует (вместо этого выможет использовать overflow: hidden или display: none).
• address_content является более подходящим элементом DOM для установки значения maxHeight (потому что для этого элемента вы устанавливаете overflow: hidden, поэтому maxHeight css будет иметь некоторыецель)