Как изменить изображение и текст одновременно на клике

Question

Я пытаюсь изменить свой текст и изображение при нажатии (только для мобильных устройств) , но это не работает.Только изображение может быть изменено с помощью функции, которую я написал.Может ли кто-нибудь помочь мне с этим, пожалуйста?Вот живой код: https://codepen.io/oleanderek/pen/OdNzME

    document.querySelectorAll(".nav__label").forEach((el) => {
    el.addEventListener('click', changeArrow);
  el.addEventListener('click', changeText);
});

function changeArrow() {
    var arrow = this.getElementsByClassName('arrow')[0];

    if (arrow.classList.contains("down-arrow")) {
        arrow.classList.remove("down-arrow");
        arrow.classList.add("up-arrow");
    } else if (arrow.classList.contains("up-arrow")) {
        arrow.classList.remove("up-arrow");
        arrow.classList.add("down-arrow");
    }
}

function changeText() {
    var changeText = this.getElementsByClassName('showText')[0];

    if (changeText.classList.contains("showText")) {
        arrow.classList.remove("showText");
        arrow.classList.add("hideText");
    } else if (changeText.classList.contains("hideText")) {
        arrow.classList.remove("hideText");
        arrow.classList.add("showText");
    }
}

Answer 1

Если вы удаляете класс для изменения, определяемая вами переменная остается неопределенной.Следовательно, вы должны определить класс, который вы не измените.Я добавил newClass Это прекрасно работает.

HTML

 <p class="newClass showText">.</p>

Javascript

   document.querySelectorAll(".nav__label").forEach((el) => {
    el.addEventListener('click', changeArrow);
  el.addEventListener('click', changeText);
});

function changeArrow() {
    var arrow = this.getElementsByClassName('arrow')[0];

    if (arrow.classList.contains("down-arrow")) {
        arrow.classList.remove("down-arrow");
        arrow.classList.add("up-arrow");
    } else if (arrow.classList.contains("up-arrow")) {
        arrow.classList.remove("up-arrow");
        arrow.classList.add("down-arrow");
    }
}

function changeText() {
    var changeText = document.querySelector(".newClass");

    if (changeText.classList.contains("showText")) {
        changeText.classList.remove("showText");
        changeText.classList.add("hideText");
    } else if (changeText.classList.contains("hideText")) {
        changeText.classList.remove("hideText");
        changeText.classList.add("showText");
    }
}