Есть некоторая функция у класса в js
push() {
let card = document.createElement('div')
card.classList.add('card')
card.innerHTML = `<h1 id = "Question">Do you remember this word?</h1>\n`;
card.innerHTML += `<div id = "flipper">
<div id = "front" style="display:block">
<p>${toUpper(this.stack.pop())}</p>
</div>
<div id = "back" style="display:none">
<p>test</p>
</div>
</div>`
if (this.stack.length == 0) {
get_words()
}
this.board.insertBefore(card, this.board.firstChild)
document.getElementById("flipper").addEventListener("click", replace)
}
Как можно заметить выше я поставил обработчик на клик блока flipper, в самом обработчике вот такой код:
function replace(event) {
let front = document.getElementById("front");
let back = document.getElementById("back");
if(front.style.display == "none"){
front.style.display = "block"
back.style.display = "none"
console.log("Front is visible")
} else {
front.style.display = "none"
back.style.display = "block"
console.log("Back is visible")
}
}
Обработчик вызывается но на экране ничего не меняется, один блок вместо другого не вставляется. Ввел в css вот такие свойства для двух блоков:
#front {
background-color: brown;
}
#back {
background-color: rgb(161, 42, 165);
}
И все равно обработчик вызывается, а на экране цвет этих блоков не чередуется, остается коричневым, т. front всегда отображается, не могу понять почему
Суть: Есть div основной, в котором 2 div(div front и div back) блока, один из которых изначально невидим, по нажатию на основной div, один становится видимым, другой нет и наоборот, сколько не кликай.
Можно заметить, что было осуществленно 3 клика и по идее сейчас должен быть блок с текстом test но как бы не так, мы видим блок front. Могу и весь код показать, просто на мой взгляд он будет мешать, ошибка где-то в этом месте я полагаю