我一直在爲一個計算機科學類(使用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">◄</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">▶</div>
</body>
</html>
如果有什麼東西,我沒有看到或不理解,我會很感激你指點一下。是的,我知道有更高效的方法來達到相同的結果,但教授希望使用這種特定的方法。
感謝, rubberfactoryworker
'a-b = c + d'。現在解決這個問題;) –