2017-10-08 53 views
-3

我一直在爲一個計算機科學類(使用JavaScript,HTML和CSS)的項目加載一個包含10個框的頁面,併爲每個框分配一個隨機rgb。在編寫以下函數之後,我的代碼以及通過JS與我的頁面進行交互的任何嘗試都是徒勞的。顯然,我尋找簡單,容易忽略的錯誤,例如分號錯誤和等號不正確,但無濟於事。提供給我的唯一線索是在檢查FireFox中的代碼時通過控制檯選項卡,該代碼表示​​Javascript ReferenceError:無效的賦值左邊。它引用行「document.getElementById(id).style.background-color = randRGB;」但如果這裏有錯誤,我可以忽略它。下面是其全部功能:Javascript ReferenceError:無效的轉讓似乎左手?有效的左側

"use strict"; 
 
/* 
 
Name 
 
Class 
 
October, 2017 
 
*/ 
 
window.onload = function() 
 
{ 
 

 
\t generalBGreset ("box") 
 

 
} 
 

 
function countElements (idPrefix) 
 
{ 
 
\t var count; 
 
\t var element; 
 

 
\t count = 0; 
 
\t element = document.getElementById (idPrefix + count); 
 
\t while (element !== null) 
 
\t { 
 
\t \t count = count + 1; 
 
\t \t element = document.getElementById (idPrefix + count); 
 
\t } //while element is not null 
 

 
\t return count; 
 
} 
 

 
function getRandInt(min, max) 
 
{ 
 
    min = Math.ceil (min); 
 
    max = Math.floor (max); 
 
    return Math.floor (Math.random() * (max - min + 1)) + min; 
 
} 
 

 

 
function getRandRGB() 
 
{ 
 
\t var r; 
 
\t var g; 
 
\t var b; 
 

 
\t r = getRandInt(0, 255); 
 
\t g = getRandInt(0, 255); 
 
\t b = getRandInt(0, 255); 
 

 
\t return "rgb(" + r + ", " + g + ", " + b + ")"; 
 
} 
 

 
function generalBGreset (prefix) 
 
{ 
 
\t var idPrefix; 
 
\t var count; 
 
\t var id; 
 
\t var element; 
 
\t var randRGB; 
 

 
\t idPrefix = prefix; 
 
\t count = 0; 
 
\t id = idPrefix + count; 
 
\t element = document.getElementById (id); 
 
\t while (element !== null) 
 
\t { 
 
\t \t randRGB = getRandRGB(); 
 
\t \t document.getElementById(id).style.background-color = randRGB; 
 
\t \t count = count + 1; 
 
\t \t id = idPrefix + count; 
 
\t \t element = document.getElementById(id); 
 
\t } // while element is not null 
 
}
<!DOCTYPE html> 
 
<!--Name 
 
Class 
 
October, 2017 
 
e--> 
 
<html lang="en"> 
 
<head> 
 
<title>This will appear in the tab</title> 
 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
 
<script src="project1j.js"> </script> 
 
<style type="text/css"> 
 
<!-- put css code here--> 
 
{ 
 
border: 0; 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
#placeholder1 
 
{ 
 
height: 100px; 
 
width: 75px; 
 
background-color: white; 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box0 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box1 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box2 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box3 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box4 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box5 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box6 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box7 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box8 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#box9 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: rgb(255, 99, 71); 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
#placeholder2 
 
{ 
 
height: 100px; 
 
width: 100px; 
 
background-color: white; 
 
margin-left: 25px; 
 
float: left; 
 
} 
 

 
body 
 
{ 
 
font-family:"Times New Roman", serif; 
 
font-size: 48pt; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
<!-- put html code here--> 
 

 
<div id = "placeholder1">&#9668;</div> 
 
<div id = "box0"></div> 
 
<div id = "box1"></div> 
 
<div id = "box2"></div> 
 
<div id = "box3"></div> 
 
<div id = "box4"></div> 
 
<div id = "box5"></div> 
 
<div id = "box6"></div> 
 
<div id = "box7"></div> 
 
<div id = "box8"></div> 
 
<div id = "box9"></div> 
 
<div id = "placeholder2">&#9654;</div> 
 

 
</body> 
 
</html>

如果有什麼東西,我沒有看到或不理解,我會很感激你指點一下。是的,我知道有更高效的方法來達到相同的結果,但教授希望使用這種特定的方法。

感謝, rubberfactoryworker

+1

'a-b = c + d'。現在解決這個問題;) –

回答

0

document.getElementById(id).style.background-color無效因 - 。也許document.getElementById(id).style['background-color']將工作?

相關問題