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

167

23 июня 2022, 11:50

Имеется кнопка и при ее нажатии должен меняться 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

Хотелось бы добавить, что тут есть решение гораздо более простое, а именно использовать 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>

Answer 2

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

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";
  }
}

Создание сайта для доставки еды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Ошибка при добавлении карточки

Написала функцию добавления карточки на страницуСама карточка добавляется, но не передается значение name в описание к карточке и Devtools выдает...

174

javascript

Для чего нужен var перед переменными в javascript?

Начал изучать JS, непонимаю для чего нужен var перед переменными если все хорошо работает и без этого

155

javascript

Не удается получить доступ к сайту visual studio code

пытаюсь запустить проект(сайт) без отладки в Visual Studio Code, в итоге вижу надпись в браузере "Не удается получить доступ к сайту", хотя до этого...

293

javascript

Как разместить все стили к document.write в обном блоке?

Написал простенькую программу для вывода таблицы умножения и хотел применить стили css к данной таблице в documentwrite()

144