www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problems calling function with <A>

  1. #1
    Join Date
    Apr 2010
    Posts
    2

    Problems calling function with <A>

    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>

  2. #2
    Join Date
    Oct 2005
    Location
    Cambridgeshire, UK
    Posts
    191
    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.

  3. #3
    Join Date
    Feb 2006
    Posts
    2,927
    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>

  4. #4
    Join Date
    Apr 2010
    Posts
    2
    Awesome thanks all!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles