2017-10-08 21 views
-3

私は10箱のページを読み込み、それぞれのボックスにランダムなrgbを割り当てるコンピュータサイエンスクラス(JavaScript、HTML、CSS)のプロジェクトに取り組んできました。以下の関数を書いた後、私のコードと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']が動作しますか?

関連する問題