使用Javascript替换HTML元素的背景色
[英]Using Javascript to Alternate background color of HTML element
问题描述
So I have a practise test that asks me to change the background color and text color of a paragraph section with id "fourth" from black background and white text to vise versa and reverse every 30 seconds preferably by using if/else statements. 
因此，我有一个实践测试，要求我将ID为“第四”的段落的背景颜色和文本颜色从黑色背景和白色文本更改为VISE，反之亦然，最好每隔30秒反转一次，最好使用if / else语句。 But for some reason my If statement (and probably my else statement) does not work. 但是由于某种原因，我的If语句（可能还有我的else语句）不起作用。
the code i have so far is this: 我到目前为止的代码是这样的：
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 的CSS
#first {
text-align: center;
}
#second {
color: green;
text-align: left;
}
#third {
color: orange;
text-align: right;
}
#fourth {
color: white;
background-color: black;
}
JAVASCRIPT 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;
How would I go about making this work? 我将如何进行这项工作？
5 个解决方案
解决方案1
0 2015-10-15 03:06:45
Issue here is in codition.. 这里的问题在整理中。
Default background color is black initially so if condition becomes true and color become pink and then when update() function call for second time, if condition becomes false and set backgroundColor to purple . 默认的背景颜色最初是black因此if条件变为true且颜色变为pink ，然后第二次调用update()函数时， if条件变为false并将backgroundColor设置为purple 。 For third time and onwards if condition always call else part because name.style.backgroundColor == "black" will never true. 第三次以后， if条件总是调用else部分，因为name.style.backgroundColor == "black"将永远不会为真。
So use only two color instead of three . 因此，仅使用两种颜色而不是三种 。
Check working snippet for understanding: 查看工作摘要以了解以下内容：
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>
解决方案2
0 2015-10-15 03:09:25
The problem is with your if statement . 问题出在您的if statement 。 You never get a black background color. 您永远不会得到黑色背景色。
See this working JSfiddle demo 观看此工作的JSfiddle演示
And should we the working updatePage function: 以及我们应该运行的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";
}
}
解决方案3
0 2015-10-15 03:10:05
You have a couple of issues here: 您在这里有几个问题：
nameis a reserved property name, so you will encounter unexpected behavior trying to use it as a variable name.name是保留的属性名称，因此尝试将其用作变量名称时会遇到意外的行为。 See Why can't I set a JavaScript function's name property?请参阅为什么不能设置JavaScript函数的name属性？ As others have said, due to your logic, once the background is purple, it will never change.
正如其他人所说，由于您的逻辑，一旦背景变成紫色，它就永远不会改变。
解决方案4
0 2015-10-15 03:15:24
I tried some tests and I had this code at end. 我尝试了一些测试，最后得到了这段代码。 When I use a (function(){})(); 当我使用(function(){})(); I'm stating this function at the the same time at the page loads. 我要在页面加载时同时说明此功能。
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);
})();
解决方案5
0 2015-10-15 03:16:27
is it not changing at all? 根本没有改变吗？ (if so you may need to define the variable.) or just not changing back? （如果这样，您可能需要定义变量。）还是只是不回头？ you say that it is supposed to change and reverse every 30 seconds but the way you have it it should change from black to pink, but it nothing will make it go back to black. 您说它应该每30秒更改和反转一次，但是您拥有它的方式应该从黑色更改为粉红色，但是什么也不会使其变回黑色。 the else statement should say: else语句应说明：
else {
name.style.backgroundColor = "black";
} }
this should change it back and forth. 这应该来回改变它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.