Thetri 03-15-2012, 04:02 PM Here is the question: using a loop, create a website which displays a message box 10 times. Every time the user clicks the message box , the background color is changed to a new color.
Heres the code I have:
<html>
<head>
<title>Colour Changer</title>
<SCRIPT language=JavaScript>
var color = newarray(10);
color[0] = red;
color[1 ]=blue;
color[2] =yellow;
color[3]=gray;
color[4]=purple;
color[5]=orange;
color[6]=green;
color[7]=black;
color[8]=teal;
color[9]=pink;
for (i=0,i<10; i++)
{
alert('MsgBox');
document.bgcolor(color{i});
}
</SCRIPT>
</head>
</html>
blaze4218 03-15-2012, 04:06 PM your for loop is wrong
you have
for (i=0,i<10; i++)
it should be
for (i=0;i<10; i++)
and just for good measure, you should make the i variable local to the loop with the var keyword
for (var i=0;i<10; i++)
VIPStephan 03-15-2012, 04:07 PM This looks pretty much like a school assigment. Please read rule #1.5 (http://www.codingforums.com/rules.htm).
blaze4218 03-15-2012, 04:08 PM your array values must be stored as strings
you have
color[0] = red;
it should be
color[0] = "red";
blaze4218 03-15-2012, 04:08 PM @VIPStephan does it not look as though they have put forth effort?
Thetri 03-15-2012, 04:09 PM This looks pretty much like a school assigment. Please read rule #1.5 (http://www.codingforums.com/rules.htm).
I was a former school assignment for stupids last year. This year it was given out as a review question. Its not worth any marks, I just want to find the answer or someone to show me whats wrong so I have more study material for my exam.
blaze4218 03-15-2012, 04:10 PM your array declaration has the two keywords new and Array combined, and not properly capitalized
VIPStephan 03-15-2012, 04:11 PM Well, OK, I’m gonna let this get through this time.
And blaze, the quote in your signature is spelled wrong. It must read: “Allwissend bin ich nicht, doch viel ist mir bewusst” ;)
blaze4218 03-15-2012, 04:12 PM It must read as I wrote it. The misspelling is intentional, just think about it for a second.
Thetri 03-15-2012, 04:12 PM your array declaration has the two keywords new and Array combined, and not properly capitalized
how about this?
var color = [10];
blaze4218 03-15-2012, 04:14 PM how about this?
var color = [10];
no, you were closer before, you just needed to adjust the spacing and capitalization
Thetri 03-15-2012, 04:17 PM So I got this now:
<html>
<head>
<title>Colour Changer</title>
<SCRIPT language=JavaScript>
var color = New Array(10);
color[0] = "red";
color[1 ]="blue";
color[2] ="yellow";
color[3]="gray";
color[4]="purple";
color[5]="orange";
color[6]="green";
color[7]="black";
color[8]="teal";
color[9]="pink";
for (var i=0;i<10; i++)
{
alert('MsgBox');
document.bgcolor(color{i});
}
</SCRIPT>
</head>
</html>
When ever I try to run it I still get a blank page. I'm thinking the MsgBox may be wrong.
blaze4218 03-15-2012, 04:23 PM this line has many errors
document.bgcolor(color{i});
1)bgcolor is not the correct DOM reference to change the color of a background
2)you cannot change the style of the document object, you must change the body, or some other object
3)to assign a style you must use the = assignment operand
4)look at how your referencing the array here... how does that differ to how you referenced the array in the rest of the script?
Edit:
I stand corrected on the first one,document.body.bgColor="lavender"; is apparently legal js...
Thetri 03-15-2012, 04:30 PM So I assume its something like this?
document.body.bgColor= "color[i]";
blaze4218 03-15-2012, 04:37 PM much better, but it is not a string, so loose the quotation marks...
Thetri 03-15-2012, 04:39 PM Something else is wrong with it, can't pinpoint exactly what it is. Judging on other array questions I have done this should work.
<html>
<head>
<title>Colour Changer</title>
<SCRIPT language=JavaScript type="text/javascript>
var color = New Array(10);
color[0] = "red";
color[1 ]="blue";
color[2] ="yellow";
color[3]="gray";
color[4]="purple";
color[5]="orange";
color[6]="green";
color[7]="black";
color[8]="teal";
color[9]="pink";
for (var i=0;i<10; i++)
{
alert('MsgBox');
document.body.bgColor= color[i];
}
</SCRIPT>
</head>
</html>
It must be that MsgBox.
blaze4218 03-15-2012, 04:46 PM the message box is fine.
the problem is that you are calling the body before it exists. move your script to after the body
blaze4218 03-15-2012, 04:48 PM also you have injected new errors with <SCRIPT language=JavaScript type="text/javascript>
and new is not caps
Thetri 03-15-2012, 04:55 PM Okay, now it runs but it does not change the background after pressing ok on all the message boxes.
<html>
<head>
<title>Colour Changer</title>
</head>
<body>
<SCRIPT language=JavaScript>
var color = new Array(10);
color[0] = "red";
color[1 ]="blue";
color[2] ="yellow";
color[3]="gray";
color[4]="purple";
color[5]="orange";
color[6]="green";
color[7]="black";
color[8]="teal";
color[9]="pink";
for (var i=0;i<10; i++)
{
alert('MsgBox');
document.body.bgColor= color[i];
}
</SCRIPT>
</body>
</html>
DaveyErwin 03-15-2012, 05:01 PM <html>
<head>
<title>Colour Changer</title>
</head>
<body>
<SCRIPT language=JavaScript type="text/javascript">
var color = new Array(10);
color[0] = "red";
color[1 ]="blue";
color[2] ="yellow";
color[3]="gray";
color[4]="purple";
color[5]="orange";
color[6]="green";
color[7]="black";
color[8]="teal";
color[9]="pink";
var index = 0;
(function setBgColor(){
document.body.style.backgroundColor=color[index];
setTimeout(setBgColor,1000);
if (++index==10)index=0;
})()
</SCRIPT>
</body>
</html>
blaze4218 03-15-2012, 05:08 PM And it won't. All the background changes will occur simultaneously, and you will see nothing. alert boxes are not an effective means to pause a script, even though it would appear that they do...
you would need something a bit more advanced than what you seemed to have learned in your class so far... a closure
var doIt = function(i){ // create a function to encapsulate the code
alert('MsgBox');
document.body.bgColor= color[i];
};
for (var i=0;i<10; i++){
(function(I){ // create an anonymous function
setTimeout(function(){doIt(I);} , 1); // with setTimeout we can tell the browser that we actually expect the doIt functions to be executed .001 seconds apart.
})(i); // here is where we send the iterator back to the anon funct so that it can be passed to doIt
}
DaveyErwin 03-15-2012, 05:23 PM <html>
<head>
<title>Colour Changer</title>
</head>
<body>
<SCRIPT language=JavaScript type="text/javascript">
var color = new Array(10);
color[0] = "red";
color[1 ]="blue";
color[2] ="yellow";
color[3]="gray";
color[4]="purple";
color[5]="orange";
color[6]="green";
color[7]="black";
color[8]="teal";
color[9]="pink";
var index = 0;
function setBgColor(){
document.body.style.backgroundColor=color[index];
if (++index==10)index=0;
}
setInterval(setBgColor,1000);
</SCRIPT>
</body>
</html>
<html>
<head>
<title>Colour Changer</title>
</head>
<body>
<SCRIPT type="text/javascript">
var color = new Array(10);
color[0] = "red";
color[1 ]="blue";
color[2] ="yellow";
color[3]="gray";
color[4]="purple";
color[5]="orange";
color[6]="green";
color[7]="black";
color[8]="teal";
color[9]="pink";
var index = 0;
setInterval(function (){
document.body.style.backgroundColor=color[index];
if (++index==10)index=0;
},1000);
</SCRIPT>
</body>
</html>
blaze4218 03-15-2012, 05:26 PM Is that your cryptic way of saying that the closure idea is not necessarily a requirement?
blaze4218 03-15-2012, 06:02 PM Not really sure what your going for there, but you seem to have lost sight of the alert()...
and while you were optimizing, why did you not opt for a more succinct array declaration?
<html>
<head>
<title>Colour Changer</title>
</head>
<body>
<SCRIPT type="text/javascript">
var color = [
"red" ,
"blue" ,
"yellow" ,
"gray" ,
"purple" ,
"orange" ,
"green" ,
"black" ,
"teal" ,
"pink"
];
var index = 0;
setInterval(function (){
document.body.style.backgroundColor=color[index];
if (++index==10)index=0;
},1000);
</SCRIPT>
</body>
</html>
heck, while we're at it... let's remove all those pesky globals, and package our little script with the rest of our lib!
window['myLib'] = function(){
var colorFun = function(){
var color = [
"red" ,
"blue" ,
"yellow" ,
"gray" ,
"purple" ,
"orange" ,
"green" ,
"black" ,
"teal" ,
"pink"
] ,
index = 0 ,
init = function(){
setInterval(function (){
document.body.style.backgroundColor=color[index];
if (++index==10)index=0;
},1000);
};
return {
'init' : init
};
}();
return {
'colorFun' : colorFun
};
}();
myLib.colorFun.init()
how's that for more study material for my exam
DaveyErwin 03-15-2012, 06:11 PM Not really sure what your going for there, but you seem to have lost sight of the alert()...
because the alerts in
continuos loops are
really annoying
blaze4218 03-15-2012, 06:14 PM I'm just joshing you man! <grin style="evil" />
the original logic didn't call for a continuous loop. that was part of your diabolical re-imagining...
DaveyErwin 03-15-2012, 06:35 PM this works for FireFox ...
(not for ie)
<html>
<head>
<title>Colour Changer</title>
</head>
<body>
<SCRIPT language=JavaScript type="text/javascript">
var color = new Array(10);
color[0] = "red";
color[1 ]="blue";
color[2] ="yellow";
color[3]="gray";
color[4]="purple";
color[5]="orange";
color[6]="green";
color[7]="black";
color[8]="teal";
color[9]="pink";
var index = 0;
(function setBgColor(){
document.body.style.backgroundColor=color[index];
alert("press me for new Bg color")
if(++index < 10)setBgColor()
})()
</SCRIPT>
</body>
</html>
this works for all browsers ...
<html>
<head>
<title>Colour Changer</title>
</head>
<body>
<SCRIPT language=JavaScript type="text/javascript">
var color = new Array(10);
color[0] = "red";
color[1 ]="blue";
color[2] ="yellow";
color[3]="gray";
color[4]="purple";
color[5]="orange";
color[6]="green";
color[7]="black";
color[8]="teal";
color[9]="pink";
var index = 0;
(function setBgColor(){
document.body.style.backgroundColor=color[index];
alert("press me for new Bg color")
if(++index < 10)setTimeout(setBgColor,0);
})()
</SCRIPT>
</body>
</html>
|
|
