can someone please explain how the elements in the html are called and how color is put in the boxes
this is the javascript
var globalCurrentColor;
window.onload=function()
{
var colors;
colors="red blue yellow green purple violet";
createColorChoices("colorPicker","box",colors," ");
test();
var result;
var hold;
var testString;
var loc;
testString="red blue hello 6";
loc=0;
result='';
while(loc<testString.length)
{
hold=getStringPart(testString,' ',loc);
result=result+hold+"\n";
loc=loc+hold.length+1;
}
window.alert(result);
setCurrentColor(null);
};
function getStringPart(source,delimiter,start)//source="red blue hello 6, delimiter= blanck, start=the positinon of delimiters(blanks in the testString)
{
var result;
result='';
while(start<source.length&&source.charAt(start)!==delimiter)
{
result=result+source.charAt(start);
start=start+1;
}
return result;
}
function countStringParts(source,delimiter)
{
var count;
var hold;
var loc;
loc=0;
count=0;
hold='';
while(loc<source.length)
{
hold=getStringPart(source,delimiter,loc);
//result=result+hold+"\n";
loc=loc+hold.length+1;
//result=result+1;
count=count+1;
}
return count;
}
function test()
{
window.alert(countStringParts("red blue hello 6"," "));
}
function createColorChoices(containerId,colorBoxPrefix,colors,delimiter)
{
var count;
var html;
var i;
html='';
i=0;
count=countStringParts(colors,delimiter);
while(i<count)
{
html=html+'<div id="'+colorBoxPrefix+i+'" class="colorChoice"></div>'+'\n';
i=i+1;
}
document.getElementById(containerId).innerHTML=html;
var loc;
var hold;
var element;
loc=0;
i=0;
while(i<count)
{
element=document.getElementById(colorBoxPrefix+i);
hold=getStringPart(colors,delimiter,loc);
element.style.backgroundColor=hold;
loc=loc+hold.length+1;
element.onmouseover=updateCurrentColor;
i=i+1;
}
}
function updateCurrentColor()
{
setCurrentColor(this.style.backgroundColor);
window.alert('Current color is;'+getCurrentColor());
}
function getCurrentColor()
{
return globalCurrentColor;
}
function setCurrentColor(newColor)
{
globalCurrentColor=newColor;
}
THIS IS THE HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Sonkaley Nelson
October 14, 2011
CISC 131
Click-A-Sketch.
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="ClickASketch.css" rel="stylesheet" type="text/css" />
<script src="ClickASketch.js" type="text/javascript"></script>
<title>Click-A-Sketch</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font-size: 12pt; }
#header { font-size: 1.5em; text-align: left; }
#colorPicker { float: left; margin-top: 1.5em;}
.colorChoice { border: .1em solid black; height: 3em; margin: .25em; width: 3em; }
#drawingArea { float: left; border: 1px solid black; }
.box { float: left; height: 1em; width: 1em; }
.endOfRow { clear: left; }
</style>
</head>
<body>
<div id="page">
<div id="colorPicker"></div><!-- id="colorPicker"-->
<div id="header">Click-A-Sketch</div>
<div id="drawingArea"></div><!-- id="drawingArea"-->
</div> <!-- id="page"-->
</body>
</html>
Before you post, read our: 
