Использование Javascript для альтернативного цвета фона элемента HTML

Итак, у меня есть практический тест, который просит меня изменить цвет фона и цвет текста раздела абзаца с идентификатором «четвертый» с черным фоном и белым текстом на тиски и наоборот 30 секунд предпочтительно с использованием операторов if/else. Но по какой-то причине оператор If (и, возможно, мой оператор else) не работает.Использование Javascript для альтернативного цвета фона элемента HTML

код я до сих пор это:

HTML

<html> 
<head> 
<link href="teststyle.css" rel="stylesheet" type="text/css"/> 
<script src="flash.js" type="text/javascript"></script> 
</head> 
<body> 
<div id="first"> 
mares eat oats 
</div> 
<h1 id="second"> 
and does eat oats 
</h1> 
<p id="third"> 
and little lambs eat ivy 
</p> 
<p id="fourth"> 
    Mirthipan Karunakaran 
</p> 
</body> 
</html>

CSS

#first { 
text-align: center; 
} 

#second { 
    color: green; 
    text-align: left; 
} 

#third { 
    color: orange; 
    text-align: right; 
} 

#fourth { 
    color: white; 
    background-color: black; 
}

JAVASCRIPT

function updatePage(){ 

var name = document.getElementById("fourth"); 

if(name.style.backgroundColor == "black") { 
name.style.backgroundColor = "pink"; 

    } else { 
    name.style.backgroundColor = "purple"; 
} 

} 

function startUpdate(){ 
    updatePage(); 
    window.setInterval(updatePage,10 * 1000); 
} 

window.onload=startUpdate;

Как бы идти о том, чтобы эту работу?

источник

2015-10-15 Mirthi

'console.log (name.style.backgroundColor)' – epascarello

Проблема здесь в codition ..

По умолчанию цвет фона black изначально так if условие становится истинным и цвет становится pink, а затем, когда update() вызов функции во второй раз, if условие становится ложным и установить BackgroundColor в purple. В третий раз и далее if Условие всегда вызывать еще часть, потому что name.style.backgroundColor == "black" никогда не будет правдой.

Так что используйте только два цвета вместо трех.

Проверить работать сниппет для понимания:

function updatePage() { 
 

 
    var name = document.getElementById("fourth"); 
 

 
    if (name.style.backgroundColor == "black") { 
 
    name.style.backgroundColor = "white"; 
 
    name.style.color = "black"; 
 

 
    } else { 
 
    name.style.backgroundColor = "black"; 
 
    name.style.color = "white"; 
 
    } 
 

 
} 
 

 
function startUpdate() { 
 
    updatePage(); 
 
    window.setInterval(updatePage, 1000); 
 
} 
 

 
window.onload = startUpdate;

#first { 
 
    text-align: center; 
 
} 
 
#second { 
 
    color: green; 
 
    text-align: left; 
 
} 
 
#third { 
 
    color: orange; 
 
    text-align: right; 
 
} 
 
#fourth { 
 
    color: white; 
 
    background-color: black; 
 
}

<html> 
 

 
<head> 
 
    <link href="teststyle.css" rel="stylesheet" type="text/css" /> 
 
    <script src="flash.js" type="text/javascript"></script> 
 
</head> 
 

 
<body> 
 
    <div id="first"> 
 
    mares eat oats 
 
    </div> 
 
    <h1 id="second"> 
 
and does eat oats 
 
</h1> 
 
    <p id="third"> 
 
    and little lambs eat ivy 
 
    </p> 
 
    <p id="fourth"> 
 
    Mirthipan Karunakaran 
 
    </p> 
 
</body> 
 

 
</html>

источник

2015-10-15 03:06:45

Да, я немой, спасибо за напоминание. T_T забыл сменить фиолетовый на черный sdfobhsdui9gbasui9gbguasd fauk. – Mirthi

Проблема с вашим if statement. Вы никогда не получите черный цвет.

Смотреть это работает JSfiddle demo

И мы должны функцию рабочего updatePage:

function updatePage() { 

    var name = document.getElementById("fourth"); 

    if (name.style.backgroundColor == "black") { 
     name.style.backgroundColor = "pink"; 
     name.style.color = "black"; 
    } else { 
     name.style.backgroundColor = "black"; 
     name.style.color = "pink"; 
    } 
}

источник

2015-10-15 03:09:25

Я идиот, большое спасибо, я забыл изменить его на черный с фиолетового цвета после того, как поиграл с ним, im a retard – Mirthi

У вас есть несколько вопросов здесь:

name зарезервированное имя свойства , поэтому вы столкнетесь с неожиданным поведением, пытающимся использовать его как имя переменной. См. Why can't I set a JavaScript function's name property?
Как говорили другие, из-за вашей логики, когда фон фиолетовый, он никогда не изменится.

источник

2015-10-15 03:10:05 chiliNUT

Я пробовал некоторые тесты, и у меня был этот код в конце. Когда я использую (function(){})();, я указываю эту функцию одновременно с загрузкой страницы.

function updatePage(){ 

var name = document.getElementById("fourth"); 
if(name.style.backgroundColor == "black") { 
name.style.backgroundColor = "purple"; 
console.log('teste'); 
    } else { 
    name.style.backgroundColor = "black"; 
} 

} 

(function(){ 
    updatePage(); 
window.setInterval(updatePage,3000); 
})();

источник

2015-10-15 03:15:24

Спасибо, что помогли! Я так глуп, Последняя часть была фиолетовой, потому что я что-то тестировал, и я забыл изменить ее. T_T – Mirthi

Не меняется ли он вообще? (если это возможно, вам может понадобиться определить переменную.) или просто не отменить? вы говорите, что он должен меняться и реверсироваться каждые 30 секунд, но так, как он у вас есть, он должен меняться от черного к розовому, но ничто не заставит его вернуться к черному. утверждение еще следует сказать:

else { 
name.style.backgroundColor = "black";

}

это должно изменить его назад и вперед.

источник

2015-10-15 03:16:27 DarionB

Я задерживаю, я изменил ее на фиолетовый для теста и забыл изменить ее обратно ... черт возьми. Спасибо огромное! – Mirthi

Использование Javascript для альтернативного цвета фона элемента HTML

ответ

Смежные вопросы