Как мне сделать так, чтобы текст исчезал, когда я нажимаю кнопку. Мой код в настоящее время настроен так, что некоторый текст настроен на отображение: блок, а остальные скрыты с отображением: нет.
Вот мой JS-код:
<script>
//Select button by id
const btn1 = document.getElementById('PowerApps');
//Add on click listener for button
btn1.addEventListener('click', function() {
//Select (h1) heading by id, and then change it's value
document.getElementById('PowerAppsText').style.display = 'block'
document.getElementById('streamOpsText').style.display = 'none'
document.getElementById('TogetherText').style.display = 'none'
})
//Select button by id
const btn2 = document.getElementById('streamOps');
//Add on click listener for button
btn2.addEventListener('click', function() {
//Select (h1) heading by id, and then change it's value
document.getElementById('streamOpsText').style.display = 'block'
document.getElementById('PowerAppsText').style.display = 'none'
document.getElementById('TogetherText').style.display = 'none'
})
//Select button by id
const btn3 = document.getElementById('Together');
//Add on click listener for button
btn3.addEventListener('click', function() {
//Select (h1) heading by id, and then change it's value
document.getElementById('TogetherText').style.display = 'block'
document.getElementById('PowerAppsText').style.display = 'none'
document.getElementById('streamOpsText').style.display = 'none'
})
</script>
Вот мой код CSS:
`#streamOpsText { дисплей: нет; }
#ВместеТекст { дисплей: нет; }`



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


display:none; и display: block; устанавливают, существует ли элемент, и должен ли он быть прочитан или нет.
Установка элемента в display:none; не просто делает его невидимым, но и функционально удаляет его (и все место, которое он занимает) из DOM.
Я бы предложил использовать видимость вместо display и/или затухать, переходя opacity.
Иметь ввиду; если видимость установлена на скрытый (или непрозрачность на 0), элемент не виден, но он по-прежнему будет занимать всю свою ширину и высоту.
Установите для них значение 0 и измените их размер вместе с переходом непрозрачности.
Вам нужно сделать анимацию/переход по
opacity-свойству (от 1 до 0 для затухания, от 0 до 1 для затухания). Вы не можете анимироватьdisplay-свойство.