Как поменять иконку луны на иконку солнца, при нажатии на кнопку смены темы?

Question

<button onclick="test()" class="theme-button bx bx-moon" id="theme-button"></button>

var btn = document.getElementById("theme-button");
var link = document.getElementById("theme-link");

btn.addEventListener("click", function () { ChangeTheme(); });

function ChangeTheme()
{
    let lightTheme = "styles/light.css";
    let darkTheme = "styles/dark.css";

    var currTheme = link.getAttribute("href");
    var theme = "";

    if(currTheme == lightTheme)
    {
     currTheme = darkTheme;
     theme = "dark";
    }
    else
    {    
     currTheme = lightTheme;
     theme = "light";
    }

    link.setAttribute("href", currTheme);

}

function test() {
    if(btn.classList = 'bx-moon'){
    btn.classList.remove('bx-moon')
    btn.classList.add('bx-sun')
    btn.classList.add('bx')
    }}

Answer 1

В if вы присваиваете (=), а не сравниваете (== или ===). В ChangeTheme, например идёт сравнение (currTheme == lightTheme).

Так же, classList является объектом, который содержит все классы, т.е. нужно использовать в условии что-то вроде btn.classList.contains('bx-moon') дабы проверить наличие конкретного класса.

Element.classList | MDN

var btn = document.getElementById("theme-button");

function test() {
  if(btn.classList.contains('bx-moon')) {
    btn.classList.remove('bx-moon')
    btn.classList.add('bx-sun')
  }
}

.bx {
  padding: 10px;
}

.bx-moon {
  background: blue;
}

.bx-sun {
  background: yellow;
}

<button onclick="test()" class="theme-button bx bx-moon" id="theme-button"></button>

БЛОГ НА HUSL

Как поменять иконку луны на иконку солнца, при нажатии на кнопку смены темы?

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