...

View Full Version : Help please



Thetri
03-15-2012, 05: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, 05: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, 05: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, 05: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, 05:08 PM
@VIPStephan does it not look as though they have put forth effort?

Thetri
03-15-2012, 05: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, 05:10 PM
your array declaration has the two keywords new and Array combined, and not properly capitalized

VIPStephan
03-15-2012, 05: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, 05:12 PM
It must read as I wrote it. The misspelling is intentional, just think about it for a second.

Thetri
03-15-2012, 05: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, 05: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, 05: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, 05: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, 05:30 PM
So I assume its something like this?


document.body.bgColor= "color[i]";

blaze4218
03-15-2012, 05:37 PM
much better, but it is not a string, so loose the quotation marks...

Thetri
03-15-2012, 05: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, 05: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, 05:48 PM
also you have injected new errors with <SCRIPT language=JavaScript type="text/javascript>
and new is not caps

Thetri
03-15-2012, 05: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, 06: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, 06: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, 06: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, 06:26 PM
Is that your cryptic way of saying that the closure idea is not necessarily a requirement?

blaze4218
03-15-2012, 07: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, 07: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, 07: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, 07: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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum