Question

所以我有一个练习测试，要求我更改段落部分的背景颜色和文字颜色，ID为＃34;第四个＆＃34;从黑色背景和白色文本反之亦然，每30秒反转一次，最好使用if / else语句。但由于某些原因，我的If语句（可能是我的其他语句）不起作用。

我到目前为止的代码是：

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;

我将如何开展这项工作？

Answer 1

这里的问题在于编码..

默认背景颜色最初为black，因此if条件变为真，颜色变为pink，然后当update()函数第二次调用if条件时变为false并将backgroundColor设置为purple。第三次及以后if条件总是调用else部分因为name.style.backgroundColor == "black"永远不会为真。

所以只使用两种颜色而不是三种。

检查工作代码段以了解：

＆＃13;

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;

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

问题在于您的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";
    }
}

Answer 3

这里有几个问题：

name是保留的属性名称，因此您会遇到意外行为，尝试将其用作变量名称。看到 Why can't I set a JavaScript function's name property?
正如其他人所说，由于你的逻辑，一旦背景为紫色，就永远不会改变。

Answer 4

我尝试了一些测试，最后我有了这个代码。当我使用(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);
})();

Answer 5

它根本没变化吗？（如果是这样，你可能需要定义变量。）或者只是不改变？你说它应该每隔30秒改变并反转一次，但你拥有它的方式应该从黑色变为粉红色，但它什么都不会让它变回黑色。 else语句应该说：

lift . lift

}

这应该来回改变。

使用Javascript替代HTML元素的背景颜色

5 个答案: