Переключатель "classList" JavaScript не переключает имя класса элемента

Question

Я работаю над своими навыками JavaScript, но я не могу понять это. Я хочу показать изображение в моем теле, когда нажата button.terug.

Я пытался использовать classList.toggle() для переключения имени класса popup с элемента <img> при нажатии, но, похоже, оно не работает. Что я делаю не так?

JS:

var uno = document.querySelector('button.terug');

var popup = document.querySelector('img.popup');

uno.addEventListener ('click', function(){
    popup.classList.toggle('img.popup');
});

HTML:

<button class="terug"></button>
<img class="popup" src="images/popup1.png" alt="beoordeling">

Answer 1

Вы пытаетесь переключить имя класса img.popup в своем списке классов элемента .popup вместо переключения имени класса popup.

Изменить это:

uno.addEventListener ('click', function(){
    popup.classList.toggle('img.popup');
});

К этому:

uno.addEventListener ('click', function(){
    popup.classList.toggle('popup'); // you don't need to add the dot since classList knows that the argument is a reference to a class-name.
});

---

Проверьте и запустите приведенный ниже фрагмент кода для практического примера приведенного выше кода:

/* JavaScript */

var uno = document.querySelector(".terug");
var popup = document.querySelector(".popup");

uno.addEventListener ('click', function(){
    popup.classList.toggle('popup'); // you don't need to add the dot since classList knows that the argument is a reference to a class-name.
});

/* CSS */

img {opacity: 0;}
img.popup {opacity: 1;}

<!-- HTML -->

<button class="terug">Click Me</button>
<img class="popup" src="images/popup1.png" alt="beoordeling">