www.webdeveloper.com
Results 1 to 11 of 11

Thread: HTML button to repeat; more than one time.

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    15

    Post HTML button to repeat; more than one time.

    I am working on this small project and to the help I received on here I am proud to say I have accomplished a few tasks.
    I have a problem though. I want to roll a dice as many times as the user wants. It only works once!


    Example:
    jsfiddle

    Last night I did some investigating, but did not solve. I found a generator here that repeats - so I looked at the source. On line 117 it shows the function being called after the function itself. I also tried to put the function call inside of the curly bracket knowingly it would crash the browser (and it did!)

    I also found an answer somewhere else online that using onclick() in HTML is old-school and to avoid it. I also found someone that using nodetext instead of the innerHTML property. -- This can be an entirely new thread. XML throws me off in terms of js and HTML. I have worked with XMLN in subtites, video, and programs on local machines.

    If it is not advised to use innerHTML or onclick, what is the 'valid' way?

    I am fairly intermediate to all of this, so if anyone can direct me to the right thread I would appreciate it.

    I did find this --> http://stackoverflow.com/questions/5...-once-in-html5

    I got lost with the answer of putting each button into a new variable.


    ugh. I am going through a lot of topics. Take a look at my jsfiddle example; can anybody make it so you can keep on hiting the Roll button and it just repeats like a while loop or something?

    Thanks in advance!

  2. #2
    Join Date
    Feb 2013
    Posts
    15
    Xmln === 'xml'.

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    Why not simply something like this :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    #pge {font-family:Georgia;font-size:large;display:block;margin:0 auto;width:400px;}
    p{text-align:center;margin:0;}
    #dce{font-size:xx-large}
    </style>
    </head>
    <body>
    	<div id="pge">
    		<fieldset>
    			<legend>Roll Dice</legend>
    			<p id="dce">&nbsp;</p>
    		</fieldset>
    		<p>
    			<input type="button" value="Roll" onclick="document.getElementById('dce').innerHTML=Math.floor(Math.random()*6)+1">
    			<input type="button" value="Clear" onclick="document.getElementById('dce').innerHTML='&nbsp;'">
    		</p>
    	</div>
    </body>
    </html>
    Or a variant with a rolling dice with this body and script (at the end) :
    Code:
    <body>
    	<div id="pge">
    		<fieldset>
    			<legend>Roll Dice</legend>
    			<p id="dce">&nbsp;</p>
    		</fieldset>
    		<p>
    			<input type="button" value="Roll" onclick="gen()">
    			<input type="button" value="Clear" onclick="document.getElementById('dce').innerHTML='&nbsp'">
    		</p>
    	</div>
    <script type="text/javascript">
    var okRoll;
    function roll(){
    	document.getElementById('dce').innerHTML=Math.floor(Math.random()*6)+1;
    	okRoll=setTimeout(roll,30);	
    }
    function gen(){
    	roll();
    	setTimeout(function(){clearTimeout(okRoll)},1000);
    }
    </script>
    </body>

  4. #4
    Join Date
    Feb 2013
    Posts
    15
    jsfiddle

    Tried a way like you shared from the link above. The way I have where the js is separate from HTML. I want to avoid document.getElementById('dce').innerHTML=Math.floor(Math.random()*6)+1; in html.

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    Then use a function !

  6. #6
    Join Date
    Feb 2013
    Posts
    15
    That is what I did the first time - it works too. The examples you gave above show the js code in the way I am talking about.

    I have been thinking more on how this can be solved. Basically I am thinking it can be possible to nest an if statement inside the function itself, but so far it has not worked.

    something like:
    Code:
    var x = random;
    
    function x() {
    makes button trigger x;
    
            if ( x() > onclick(one_time) ) {
                   x.reload(false);
                   return x();
                 } else {}
    }
    In another description of what I want to do is not necessarily reload the entire page - just a block of JavaScript code when triggered by a button on the page. Preferably from cache - not the server.


    The example from above makes sense to me, but I cannot get it to work.

    The setTimeout() and setTmeclear() methods appear to make a different way to solve it, but remember I am newer at JS and it just seems harder to grasp the concepts of these methods.

    From your explanation on the 2nd example I see:

    Code:
    var x;
    function roll() {
    makes button trigger && how to random ←- this can be a function
    x = setTimeout(roll,30);
    }
    
    function gen() {
    roll();
    setTimeout( function() { 
       clearTimeout(x);
    }, 1000;
    }
    You see, this is a weird layout of code to me; a function nested inside of a function.:
    setTimeout( function() {
    clearTimeout(x);
    }, 1000;


    Again it does not work, see:
    jsfiddle

    Thank you 007Julien for your time and advice!


    There has to be another way; multiple ways I am just missing something.

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    My script is running, try it please, before to miss the copy !

  8. #8
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Your frustration is jumping out of the page(s).
    Take it easy with small steps at a time making sure what you do does work before you move to the next step.

    Also some of the things you are reading have some truth in them BUT wait till you have the basics before going advanced. Albeit keeping those advanced ideas in your head till you have an AaaHaa moment.

    Also innerHTML is not evil, at least not any more. Well it never did in my books.

    Pray I do not get into trouble here but I believe this is what you are trying to ask for.


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>xxx</title>
    </head>
    <body>
    <h1>Dice Game</h1>
    <p id="here">Number will show here....eventually</p>
    <button id="smacker">Smack Me</button>
    <script>
    
    var num, show, btn;
    function showNumber() {
        num = Math.floor(Math.random() * 6) + 1;
    	show.innerHTML = num;
    	btn.innerHTML = 'And Again';
    }
    function initAll() {
        btn = document.getElementById('smacker');
    	btn.addEventListener('click', showNumber, false);
    	show = document.getElementById('here');
    }
    initAll();
    
    </script>
    </body>
    </html>
    Last edited by grumpyOleMan; 02-08-2013 at 10:51 PM.

  9. #9
    Join Date
    Feb 2013
    Posts
    15
    Here is your example:

    yourexample

    I tried:

    jsfiddle

    I have taken the past 2 hours trying to get it to work. The stupid double quotes - single quotes are driving me crazy. The only difference between the example and mine is I set the Math.floor(Math.random() * 59 + 1) inside a variable. I want to do this in order to loop this.

    I noticed I made buttons in two ways: <button onclick="blah.....">Click Me</button>, but the more efficient way is <input type="button" value="Click nbsp; Me" onclick="blah..." />


    ugh.......... now the quotes

    <input type="button" value="Roll" onclick="document.getElementById('gen_num').innerHTML=" + random; /> <- random not in variable.
    <input type="button" value="Roll" onclick="document.getElementById('gen_num').innerHTML=' + random;'" /> <- literally + random;
    <input type='button' value="Roll" onclick="document.getElementById("gen_num") + random;' /> <- with var random = .innerHTML=Math.floor(Math.random() * 6 + 1);
    again, literal variable with single quotes.
    <input type="button" value="Roll" onclick="document.getElementById('gen_num').innerHTML=" + random;" "/>


    I'm lost over stupid basic programming rules.

  10. #10
    Join Date
    Feb 2013
    Posts
    15
    Thank you grumpyOleMan! I will continue to look at this on Monday. I will let you all know how this turns out!

  11. #11
    Join Date
    Feb 2013
    Posts
    15
    grumpyOleMan, I want to thank you. I used your example and applied it to my project. I turned out awesome. Same to you 007

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