Question

我一直致力于一个计算机科学课程（使用JavaScript，HTML和CSS），该课程可以加载一个包含10个框的页面，并为每个框分配一个随机的rgb。在编写了以下函数之后，我的代码以及通过JS与我的页面交互的任何尝试都是徒劳的。显然，我寻找简单，易于忽视的错误，例如错误的分号和不正确的等号，但无济于事。提供给我的唯一线索是在检查FireFox中的代码时通过控制台选项卡，其中说，Javascript ReferenceError：无效的赋值左侧。它引用了“document.getElementById（id）.style.background-color = randRGB;”这一行。但是如果这里有错误我会忽略它。以下是功能：

"use strict";
/*
Name
Class
October, 2017
*/
window.onload = function()
{

	generalBGreset ( "box" )

}

function countElements ( idPrefix )
{
	var count;
	var element;

	count = 0;
	element = document.getElementById ( idPrefix + count );
	while ( element !== null )
	{
		count = count + 1;
		element = document.getElementById ( idPrefix + count );
	} //while element is not null

	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( )
{
	var r;
	var g;
	var b;

	r = getRandInt( 0, 255 );
	g = getRandInt( 0, 255 );
	b = getRandInt( 0, 255 );

	return "rgb(" + r + ", " + g + ", " + b + ")";
}

function generalBGreset ( prefix )
{
	var idPrefix;
	var count;
	var id;
	var element;
	var randRGB;

	idPrefix = prefix;
	count = 0;
	id = idPrefix + count;
	element = document.getElementById ( id );
	while ( element !== null)
	{
		randRGB = getRandRGB( );
		document.getElementById(id).style.background-color = randRGB;
		count = count + 1;
		id = idPrefix + count;
		element = document.getElementById(id);
	} // 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

Answer 1

由于 -

document.getElementById(id).style.background-color无效。也许document.getElementById(id).style['background-color']可行吗？

Javascript ReferenceError：看似无效的左侧赋值？有效的左手边

1 个答案: