текст не появляется

Question

function toggleText() {
  let button = document.querySelector('.toggle-text-button');
  let text = document.querySelector('#text');
  button.addEventListener('click', () => {
   
    if(text.hasAttributes('hidden') == true){
       console.log('adad')
      text.hidden = '';
    }
    text.hidden = true;
  })
}

toggleText()

<button class="toggle-text-button">Нажмите, чтобы спрятать/показать текст</button>
  <div id="text">Текст</div>

Почему не появляется текст если условие срабатывает ?

Answer 1

Может так будет лучше?
Почему не появляется текст если условие срабатывает ?
Потому-что у вас после выполнение условия которая в if выполняется text.hidden = true которая скрывает текст занова

const button = document.querySelector('.toggle-text-button');
const text = document.querySelector('#text');

button.addEventListener('click', () => {
  text.classList.toggle('hide');
})

.hide {
  display: none;
}

<button class="toggle-text-button">Нажмите, чтобы спрятать/показать текст</button>
<div id="text">Текст</div>

Это для вас будет работать

function toggleText() {
  let button = document.querySelector('.toggle-text-button');
  let text = document.querySelector('#text');
  button.addEventListener('click', () => {

    if (text.hidden == true) {
      console.log('adad')
      text.hidden = '';
    } else text.hidden = true;
  })
}

toggleText()

<button class="toggle-text-button">Нажмите, чтобы спрятать/показать текст</button>
<div id="text">Текст</div>

Answer 2

строка text.hidden = true выполняется каждый раз при нажатии кнопки, так как расположена после if

Для решения, эту строку нужно поместить в блок else.

Еще один недочет связан с использованием .hasAttributes, данный метод не принимает никаких параметров и возвращает true если у элемента есть хотя бы один, любой, атрибут.

Для проверки наличий конкретного атрибута, нужно использовать метод .hasAttribute

function toggleText() {
  let button = document.querySelector('.toggle-text-button');
  let text = document.querySelector('#text');
  button.addEventListener('click', () => {
    if (text.hasAttribute('hidden') == true) {
      console.log('adad')
      text.hidden = '';
    } else {
      text.hidden = true;
    }
  })
}

toggleText()

<button class="toggle-text-button">Нажмите, чтобы спрятать/показать текст</button>
<div id="text">Текст</div>

Answer 3

Делать надо так:

function toggleText() {
  let button = document.querySelector('.toggle-text-button');
  let text = document.querySelector('#text');

  button.addEventListener('click', () => {
    text.hidden = !text.hidden;
  })
}

toggleText()

<button class="toggle-text-button">Нажмите, чтобы спрятать/показать текст</button>
<div id="text">Текст</div>

Ну или так, если там ещё что-то сделать надо:

function toggleText() {
  let button = document.querySelector('.toggle-text-button');
  let text = document.querySelector('#text');

  button.addEventListener('click', () => {
    let isHidden = text.hidden
  
    if (isHidden) {
      console.log('adad')
    }
    
    text.hidden = !isHidden;
  })
}

toggleText()

<button class="toggle-text-button">Нажмите, чтобы спрятать/показать текст</button>
<div id="text">Текст</div>

БЛОГ НА HUSL

текст не появляется

Ответы (3 шт):