I want to change the class ‘fa-meh-blank’ to ‘fa-smile-wink’ but it doesn’t work.
When I flip the two classes, however, it works. I don’t understand what’s wrong, what would anyone have an idea?
const icone = document.querySelector("i");
console.log(icone);
//Je soumets
icone.addEventListener('click', function() {
console.log('icône cliqué');
icone.classList.toggle('happy');
icone.classList.toggle('fa-smile-wink');
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<div class="container">
<div class="bloc-central">
<h1>Projet Abonnez-vous</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ggGT2N4l_08?si=hFk7Xzw16cEEzi6x" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<div class="bloc-btn">
<i class="far fa-meh-blank"></i>
<button class="btn">Abonnez-vous</button>
</div>
</div>
</div>