Не меняется значение id обратно

Question

Имеется кнопка и при ее нажатии должен меняться id с theme-white на theme-black, но когда id меняется, то еще раз при нажатие кнопки, не возвращается id с theme-black на theme-white

В чем проблема?

HTML:

<button onclick="mytheme();">Click</button><main id="theme-white"></main>

CSS:

main { width: 500px; height: 500px; margin: 50px; }#theme-white { background-color: red; }#theme-black { background-color: black; }button { width: 250px; height: 50px; }

JS:

function mytheme() {
  if (document.getElementById("theme-white").id == "theme-white") {
    document.getElementById("theme-white").id = "theme-black";
  }
  
  else if (document.getElementById("theme-black").id == "theme-black") {
    document.getElementById("theme-black").id = "theme-white";
  }
}

Answer 1

Посмотрите ошибки в консоли.

function mytheme() {
  if (document.getElementById("theme-white")) {
    document.getElementById("theme-white").id = "theme-black";
  } else if (document.getElementById("theme-black")) {
    document.getElementById("theme-black").id = "theme-white";
  }
}

Answer 2

Хотелось бы добавить, что тут есть решение гораздо более простое, а именно использовать classList.toggle.

Кроме того айдишники для темы использовать не лучший вариант.

И еще лучше использовать addEventListener (или хотя бы onclick в js, но точно не делать это прямо в html таким образом <button onclick="mytheme(); ..., по той причине что такой способ уже устарел, более того addEventListener дает преимущества в том плане, что можно повесить несколько событий на один элемент, и удалить их потом с помощью removeEventListener)

const btn = document.getElementById('btn')
const main = document.getElementById('main')

function mytheme() {
  main.classList.toggle('theme-black')
}

btn.addEventListener('click', mytheme)

main {
    width: 500px;
    height: 500px;
    margin: 50px;
}
.theme-white {
    background-color: red;
}
.theme-black {
    background-color: black;
}
button {
    width: 250px;
    height: 50px;
}

<button id="btn">Click</button>
<main id="main" class="theme-white"></main>

в случае без addEventListener это будет выглядеть так:

const btn = document.getElementById('btn')
const main = document.getElementById('main')

function mytheme() {
  main.classList.toggle('theme-black')
}

btn.onclick = mytheme

main {
    width: 500px;
    height: 500px;
    margin: 50px;
}
.theme-white {
    background-color: red;
}
.theme-black {
    background-color: black;
}
button {
    width: 250px;
    height: 50px;
}

<button id="btn">Click</button>
<main id="main" class="theme-white"></main>

БЛОГ НА HUSL

Не меняется значение id обратно

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