www.webdeveloper.com
Results 1 to 7 of 7

Thread: page keeps reloading -js/html5

Hybrid View

  1. #1
    Join Date
    Oct 2009
    Posts
    3

    page keeps reloading -js/html5

    i'm not sure whether or not i'm in the right place, but here i go-
    i'm trying to learn js &html5. now i have an issue. i'm working on a dice game (craps) using the html5 <canvas>. my dice are working fine but every time i click the "roll" button the page reloads which resets my form. the form provides feedback about the rolls. it includes the output of the counter variable, and win, lose, or shoot again info.

    html5 can be viewed at


    here is some of the js. if you need it all i'll post it later - just let me know.

    Fyi- if i take the call to fxInit() out of the body tag in the html5 the canvas does not persist, it blinks with every (roll) onClick Event

    I have used ie9 js debugger and it steps through flawlessly every time 4-5 counts .
    can someone help me with theses issues or point me in a good direction
    '
    thanks,
    frank
    var firstTurn = true;
    var pntHolder=0;
    var youWin="You Win!";
    var youLose="You Lose!";
    var youNeed="You need a ";
    var shootAgain="Shoot Again";
    var thro= "Throw # ";
    var counter =0;

    //window.onload=fxInit();
    function fxInit() {
    var ch = 1+ Math.floor(Math.random() * 6);
    var ch2 = 1+ Math.floor(Math.random()*6);//var ch =6;
    //var counter2=counter++;
    document.f.stage.value=thro + counter;
    //alert(firstTurn);
    //alert(counter);
    fxDrawFace(ch);
    fxDrawFace2(ch2);
    fxPnt(ch,ch2);
    counter++;

    return (false);

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    show your html, including the button your clicking on.

  3. #3
    Join Date
    Oct 2009
    Posts
    3

    here's the html

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Dice Game - HTML5</title>
    <link href="styleSheets.css" rel="stylesheet" type="text/css" media="screen">
    <script src="diceGame.js" type="text/javascript">
    </script>
    </head>
    	<body onLoad="fxInit()" >
      <div id= "theCanvas">  
    	<canvas id="canvasMain" width="600" height="600" >
    	Browser does not support HTML5 canvas.
    	</canvas>
    	<form name="f">
        Stage: <input name="stage" value=""/>
        Point: <input name="pv" value=" "/>
        Outcome: <input name="outcome" value=" "/><br>
    	<button id="rollDice" onClick="fxInit();">Roll</button>
        </form>
      </div>
        
    	<<button id = 'clearCanvas' onClick="fxClearCanvas()">clear</button>
    </body>
    </html>

  4. #4
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    your button is submitting the form that is whay your page is refreshing.

    try this you already have the function returning false so this should prevent the form submit now)

    Code:
    <button id="rollDice" onClick="return fxInit();">Roll</button>

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Better set the type of the button.

    I presume that ofranko tested the code in a browser other than IE. Well the default type of the button element is submit, thus it will act like a submit button.

    It is enough to:
    Code:
    <button id="rollDice" type="button" onclick="fxInit();">Roll</button>
    And there will be no self submit action, thus no changing of the session.

    Note also that in HTML5 (same as in XHTML or HTML strict) the events should be written in lowercase. And the second button should be nested within the FORM as well. There must not be form's elements outside a parent form.
    Last edited by Kor; 11-22-2011 at 11:10 AM.

  6. #6
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    thanks kor, I totally missed that!

  7. #7
    Join Date
    Oct 2009
    Posts
    3
    Thank you all for your help here. i ended up using:

    <button id="rollDice" type="button" onClick="return fxInit();">Roll</button>

    when i input and ran this i discovered some logic errors that were hiding from me.

    Life is Gr8,
    frank

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