Блог

Главная - Вопросы по программированию - Вот функция для переключения в темный режим, но последнее условие не работает

Вот функция для переключения в темный режим, но последнее условие не работает

#javascript #dom-events

#javascript #dom-события

Вопрос:

 const btnDarkLight = (btn) => {
  document.addEventListener("click", (e) => {
    if (e.target.matches(btn)) {
      document.querySelector(btn);
      let moon = document.body.classList.toggle("oscuro");
    }

    if (e.target.matches(btn)) {

      if (this.value === "🌙") {
        document.querySelector(btn).innerText = "☀️";
      } else {
        document.querySelector(btn).innerText = "🌙";
      }
    }
  })
}

btnDarkLight("#btn-light-dark");  
 <button id="btn-light-dark" class="button-dark" type="button">🌙</button>

Я пытаюсь изменить значок внутри кнопки, когда активирован темный режим, но условие не работает.

Комментарии:

1. Войдите this.value в консоль. Вероятно, это не то, что вы ищете.

2. В этом так много неправильных вещей. во-первых, не создавайте прослушивателя внутри вызываемой функции — в конечном итоге вы создадите много, много из них. Во-вторых, вам не нужен querySelect элемент button, потому что он передается в вашу функцию. в-третьих, предоставление точно такого же условия if является избыточным и ненужным. Слишком многое нужно решить.

3. @RandyCasburn Нет ничего плохого в том, чтобы поместить код внутри функции, если только функция не вызывается несколько раз (т. Е. Не добавляйте прослушиватель событий внутри другого прослушивателя).

4. this.value должно быть this.innerText .

5. @Barmar — Тогда поместите его в IIFE. Функция-оболочка вообще не нужна и предполагает, что она вызывается несколько раз (потенциально).

Ответ №1:

Вам нужно проверить e.target.innerText , не this.value . Поскольку вы определили прослушиватель с помощью функции со стрелкой, this унаследованной от вызывающей среды, она не является целью события. И содержимое кнопки находится в ее тексте, а не в значении.

 const btnDarkLight = (btn) => {
  document.addEventListener("click", (e) => {
    if (e.target.matches(btn)) {
      let moon = document.body.classList.toggle("oscuro");
      if (e.target.innerText === "🌙") {
        e.target.innerText = "☀️";
      } else {
        e.target.innerText = "🌙";
      }
    }
  })
}

btnDarkLight("#btn-light-dark");  
 <button id="btn-light-dark" class="button-dark" type="button">🌙</button>

Ответ №2:

Сэкономьте себе много работы, просто сделайте это с помощью css и переключите соответствующие классы.

 document.querySelector("#btn-light-dark").addEventListener("click", function(){
  this.classList.toggle("day");
  this.classList.toggle("night");
});  
 .day:before {
  content:'☀️'
}
.night:before {
  content:'🌙'
}  
 <button id="btn-light-dark" class="day"></button>

Ответ №3:

Я бы посмотрел на класс и не полагался на текст кнопки.

 const btnDarkLight = (btn) => {
  const btnElem = document.querySelector(btn);

  const setText = () => {
    const text = document.body.classList.contains('oscuro') ? '🌙' : '☀️';
    btnElem.textContent = text;
  }

  document.addEventListener("click", (e) => {
    if (e.target.matches(btn)) {
      document.body.classList.toggle('oscuro');
      setText();
    }
  });

  setText();

}

btnDarkLight("#btn-light-dark");  
 .oscuro {
  background-color: black;
}  
 <button id="btn-light-dark" class="button-dark" type="button">🌙</button>

или просто полагаться на CSS

 const btnDarkLight = (btn) => {
  document.addEventListener("click", (e) => {
    if (e.target.matches(btn)) {
      document.body.classList.toggle('oscuro');
    }
  });
}

btnDarkLight("#btn-light-dark");  
 .oscuro {
  background-color: black;
}

#btn-light-dark::after {
  content: '☀️';
}

body.oscuro #btn-light-dark::after {
  content: '🌙';
}  
 <button id="btn-light-dark" class="button-dark" type="button"></button>

Ответ №4:

Вы можете использовать этот код ниже

 document.getElementById('btn-light-dark').addEventListener("click", (e)=>{
    if (e.target.innerText === "🌙") {
            e.target.innerText = "☀️";
            document.body.classList.toggle("oscuro")
          } else e.target.innerText = "🌙";
})  
 <button id="btn-light-dark" class="button-dark" type="button">🌙</button>