使用JavaScript的HTML元素的替代背景顏色

所以我有一個實踐的檢驗，要求我改變與黑色背景和白色文字標識「第四」的一段段的背景顏色和文字顏色反之亦然和反向每最好使用if/else語句30秒。但由於某些原因，我的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

我是一個白癡，非常感謝你，我忘記把它變成紫色後從紫色變成黑色，我遲到了 – 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語句應該說：

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

}

這應該改變它來回。

來源

2015-10-15 03:16:27 DarionB

我是一個阻礙，我將它改爲紫色進行測試，並忘記將其改回......上帝保佑。非常感謝！ – Mirthi

使用JavaScript的HTML元素的替代背景顏色

回答

相關問題