1

Есть некоторая функция у класса в 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. Могу и весь код показать, просто на мой взгляд он будет мешать, ошибка где-то в этом месте я полагаю

1 ответ 1

0
//document.getElementById("flipper").addEventListener("click", replace)
card.querySelector("#flipper").addEventListener("click", replace);

А лучше:

card.innerHTML += `<div class="flipper">
  ...

card.querySelector(".flipper").addEventListener("click", replace);
2
  • queryQuery это что? Если вы имели в виду querySelector, то это не работает 3 мая 2021 в 15:46
  • @АндрейПетров Это работает.
    – user176262
    3 мая 2021 в 15:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.