0

Почему первое условие истинно, ведь span по default'у не является "none"... (на примере Read More Read Less Button)

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
#more {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

4
  • Оно истинно только в случае когда Вы нажимаете "Read less", так как после нажатия на "Read more" Вы присваиваете dots.style.display = "none";
    – Simon
    Commented 31 июл. 2022 в 15:21
  • я понимаю. Так почему тогда первый сценарий срабатывает?(так скзаать по умолчанию, до нажатия)
    – ida
    Commented 31 июл. 2022 в 15:43
  • До нажатия никакой сценарий не срабатывает, так как функция срабатывает только на клик, у Вас просто span с id more имеет стили #more {display: none;}. Либо какого поведения Вы ожидаете/ожидали?
    – Simon
    Commented 31 июл. 2022 в 15:55
  • @Simon спс, тебе большое, дякую! )
    – ida
    Commented 31 июл. 2022 в 20:09

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.