помогите с JavaScripts для html

Question

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

Прошу вас помочь так как сам не очень разбераюсь и уже гуглил читал нечего не получается

Код:

Html:

<div>
  <input type="checkbox" class="checkbox" id="chk"/>
  <label class="label" for="chk">
    <i class="fas fa-moon"></i>
    <i class="fas fa-sun"></i>
    <div class="ball"></div>
  </label>
  <script src="js/slider.js"></script>
 </div>
</div>  
<h1 class="text">Test
  <img src="image/cloudblue.png" id="zxc"  width="50" height="40" vspace="0" hspace="0">  
  <script src="js/slider.js"></script>
</h1>

JS:

const chk = document.getElementById('chk');

chk.addEventListener('change', () => {
    document.body.classList.toggle('dark');             
});
//Вот начало кода где надо сделать нажато и выключено 
chk.addEventListener('change', () => { 
    document.getElementById("zxc").src=("cloudred.png"); 
});

Answer 1

У вас странное подключение скриптов. Подключите скрипт на странице один раз перед закрывающим тегом body.
На один и тот же элемент вы вешайте о один и тот же event два раза. Достаточно на элемент повесить event один раз и внутри колбэка делайте все необходимые манипуляции.

Т.е. js будет примерно выглядеть следующим образом:

const chk = document.getElementById('chk');
const zxc = document.getElementById("zxc");

chk.addEventListener('change', () => {
    document.body.classList.toggle('dark');

    if (document.body.classList.contains('dark') {
      zxc.src = "cloudred.png";
    } else {
      zxc.src = "cloudblue.png";
    }
});

Как я понимаю картинка зависит от класса тега body. Можно добавить проверку и обновлять картинку в зависимости от примененного класса.

БЛОГ НА HUSL

помогите с JavaScripts для html

Ответы (1 шт):