I've been working on a project for a computer science class (with JavaScript, HTML, and CSS) that loads a page with 10 boxes, and for each assigns a random rgb to each box. After writing the following function, my code and any attempt to interface with my page via JS has been in vain. Obviously, I looked for simple, easy-to-overlook errors such as misplaced semicolons and incorrect amounts of equals signs, but to no avail. The only clue provided to me was through the console tab while inspecting the code in FireFox, which says, Javascript ReferenceError: invalid assignment left-hand side. It's referencing the line "document.getElementById(id).style.background-color = randRGB;" but if there's an error here I'm overlooking it. Here is the function in its entirety:
"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">◄</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>If there's something I'm not seeing or failing to understand, I'd really appreciate your pointing it out. Yes, I know there are far more efficient ways of achieving the same result but the professor would like this particular method to be used.
Thanks, rubberfactoryworker
