2

По нажатии на кнопку, бэкграунд в body должен менять цвет. Все работает сносно, кроме того, что нажимается она, почему-то, только со второго раза.

function ColorChange() {
if (document.body.style.backgroundColor == "black") {
    document.body.style.backgroundColor = "white";
} else {
    document.body.style.backgroundColor = "black"; 
}
}

В стилях к body следующее:

body{
background-color:black;
transition: all 4s;
}
1
  • Неа, всё правильно отрабатывает: с первого раза.
    – NeedH8
    9 июл 2017 в 19:01

1 ответ 1

1

Всё потому, что изначально у вас нет никакого цвета. Вы проверяете inline цвет.

То есть document.body.style.backgroundColor берёт цвет из <body style, а не из таблицы стилей. Поэтому лучше было бы сделать функцию toggleClass, но если вам всё таки надо именно стили переключать, то можно сделать проверку на наличие цвета у элемента.

function ColorChange() {
var currentColor = document.body.style.backgroundColor;
alert(currentColor);
if (!currentColor || currentColor == "black") {
    document.body.style.backgroundColor = "white";
} else {
    document.body.style.backgroundColor = "black"; 
}
}
body{
background-color:black;
transition: all 4s;
}
<body>
<button onclick="ColorChange()">test</button>
</body>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.