The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Problem with writing value of variable, First Javascript "Project"
UniD
post Jul 9 2007, 04:26 PM
Post #1


Novice
**

Group: Members
Posts: 20
Joined: 9-July 07
Member No.: 3,303
Hello. First off, I figure I should give some background information concerning this "project". My friends and I were looking for a way to be able to play Twister without the use of the spinning table. So I decided to try to solve the problem via Javascript. My hope was to be able to randomly select a color, body part, and orientation (left or right) and print each value to the screen.

I think the rest explains itself.

Oh, and the site I uploaded the code at is: http://conformingmasks.com/Twister/twister.html

CODE

<html>
<head>
<title>Twister</title>
<style type="text/css">
p{font-size: 36px; color: red}
</style>
<script type = "text/javascript">
window.onload = randomize;

function initLoad()
{    
    SetTimeout("randomize()", 1000);
}

function randomize()
{
    Color = new Array("red", "blue", "yellow", "green");
    Part = new Array("foot", "hand");
    Side = new Array("left", "right");
    var rC = Color[rand(4)-1];
    var rP = Part[rand(2)-1];
    var rS = Side[rand(2)-1];    //r = random
    document.getElementById("color").write(rC);
    document.getElementById("part").write(rP);
    document.getElementById("side").write(rS); // h = handle
    <!--hC.write(rC);
    hP.write(rP);
    hS.write(rS);-->
    initLoad(); //repeat
}

//Idea: Randomize colors, body parts, and sides
// After randomizing print it
// Then wait 10 seconds, and re-call initial function
//red, blue, yellow, green
</script>
</head>

<body>
<h1>Welcome to twister.</h1>
<h1>Color:</h1><br />
<p id = "color"></p><br />
<h1>Part:</h1><br />
<p id = "part"></p><br />
<h1>Side:</h1><br />
<p id = "side"></p>
</body>
</html>


This post has been edited by UniD: Jul 9 2007, 04:50 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 9 2007, 07:07 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
CODE
var rC = Color[rand(4)-1];

AFAIK there's no rand() method in JS. Also arrays by default begin at zero, so with four items you want random integers between 0 and 3. See http://www.javascriptkit.com/javatutors/random2.shtml

CODE
document.getElementById("color").write(rC);

document.write() can only be used to write while the page is rendered, not to rewrite once it's loaded. The non-std but well-supported innerHTML property might be used instead.

CODE
<!--hC.write(rC);
hP.write(rP);
hS.write(rS);-->

You can't use HTML comments to hide parts of a script.

Here's a modified version:
CODE
window.onload = randomize;
function randomize()
{
    var Color = new Array("red", "blue", "yellow", "green");
    var Part = new Array("foot", "hand");
    var Side = new Array("left", "right");
    var rC = Color[Math.round(Math.random()*3)];
    var rP = Part[Math.round(Math.random()*1)];
    var rS = Side[Math.round(Math.random()*1)];
    document.getElementById("color").innerHTML=rC;
    document.getElementById("part").innerHTML=rP;
    document.getElementById("side").innerHTML=rS;
    setTimeout("randomize()", 1000);
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
UniD
post Jul 9 2007, 11:53 PM
Post #3


Novice
**

Group: Members
Posts: 20
Joined: 9-July 07
Member No.: 3,303
I read about the write() problem you mentioned, but I couldn't get the innerHTML operator to work so I reverted back to the aforementioned code. I see now the majority of my problem derived from my incorrect use of the Math object.

Thanks for the lesson. :]

EDIT: I updated the file and it compensates for each of the four colors. Also I changed the 1 second to a 10 second delay. It's very nifty. Hehe thanks again!

This post has been edited by UniD: Jul 10 2007, 12:44 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 2nd May 2024 - 02:55 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC