Problems calling function with <A>

**zipperyzoodawg** · 04-13-2010 02:18 PM

Hi, I am trying to produce 5 random integers and display them. Problem is, the following code renders differently in each browser. Chrome won't display the random values, IE does it right, firefox displays the rand values but then they are replaced with original <A>, like the code had looped! I'm afraid the script tag is too generic but really I am in the dark.

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<SCRIPT type="text/javascript" language="JavaScript">

diceArray = new Array(5)

function rollDice()
{
var i;

for(i=0; i<5; i++)
{
diceArray[i]=Math.round(Math.random() * 6) % 6 + 1;
document.write(diceArray[i]);
}
}
</SCRIPT>
</HEAD>

<BODY>

<a href="#" onClick="rollDice();">when I click should display 5 rand variables</a>

</BODY>
</HTML>

**BIOSTALL** · 04-13-2010 03:06 PM

There is a thread expressing a similar problem to you here. The bottom post will explain the problem.

In this day and age document.write isn't recommended and the Javascript DOM should be referenced instead.

Heres your code but using the DOM method instead:

HTML Code:

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<SCRIPT type="text/javascript" language="javaScript">

var diceArray = new Array(5);

function rollDice() {
	for(i=0; i<5; i++) {
		diceArray[i]=Math.round(Math.random() * 6) % 6 + 1;
	}
	document.getElementById('dice_numbers').innerHTML = diceArray.join(" ");
}
</SCRIPT>
</HEAD>

<BODY>

<a href="#" onClick="rollDice();">when I click should display 5 rand variables</a>

<div id="dice_numbers"></div>

</BODY>
</HTML>

Let me know if you have any questions reference the above code.

**mrhoo** · 04-13-2010 03:09 PM

document.write opens a new page with its argument for the source.
you can use dom.createElement or innerHTML to write to an open page,
or set the value or nodeValue of an element that already exists, like the link.

<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title> roll dice</title>
<script type= "text/javascript">

Code:

function rollDice(){
    var diceArray= [];
    for(var i= 0; i<5; i++){
        diceArray[i]= Math.round(Math.random()*6)%6 + 1;
    }
    document.getElementsByTagName('a')[0].firstChild.data= 
    diceArray.join(' ') +' Again?';   
}

</script>
</head>
<body>
<a href= "#" onClick= "rollDice();"> when I click should display 5 rand variables</a>
</body>
</html>

**zipperyzoodawg** · 04-13-2010 04:20 PM

Awesome thanks all!

Thread: Problems calling function with <A>

Thread Tools

Display

Problems calling function with <A>

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions