Другой alert при повторном клике

Question

Создал простенькую анимацию текста. Написал скрипт, который при клике выключает анимацию и выводит сообщение "Анимация текста выключена". Хотел сделать так, чтобы при повторном клике анимация запускалась и выводилось уже другое сообщение "Анимация текста снова работает", анимация запускается, но нужное мне сообщение не появляется =(

let Second_text = document.querySelector(".second_text"); 

Second_text.addEventListener('click', function(e){  

if(Second_text){
this.classList.toggle('no_animation');
alert('Анимация текста выключена');
}

else{
alert('Анимация текста снова работает'); // Это сообщение должно выводиться при повторном клике
}

});

.second_text{
width:400px;
padding:10px;
text-align:center;
color:white;
font-size:40px;
font-weight: bold;
font-family:arial;
animation: 2s neon-2 alternate-reverse infinite;
position:absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
padding-bottom:60px;
}

.no_animation{
animation: none;    
}

@keyframes neon-2 {
from {
text-shadow: 0 0 5px #87CEEB,
0 0 10px #87CEFA,
0 0 15px #00BFFF,
0 0 20px #1E90FF;
}
to {
text-shadow: 0 0 20px #7478AE,
0 0 35px #7478AE,
0 0 40px #7478AE,
0 0 50px #7478AEk,
0 0 800px #7478AE;
}
}

<p class="second_text">
Я ТЕБЕ ПОКУШАТЬ ПРИНЕС =)
</p>

Answer 1

Например вот так:

...
this.classList.toggle('no_animation');
if(this.classList.contains('no_animation'))
  alert('Анимация текста выключена');
else
  alert('Анимация текста снова работает');    
...

БЛОГ НА HUSL

Другой alert при повторном клике

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