www.webdeveloper.com
Results 1 to 4 of 4

Thread: JavaScript, got the random number button - need to record and display results

  1. #1
    Join Date
    Jun 2014
    Posts
    3

    JavaScript, got the random number button - need to record and display results

    Firstly, apologies - My JS skills are poor and I need to build a score board for a charity event this week.

    I built the random number generator by cannibalising another script but I don't know how to record and display the results - could anyone help please?

    Code:
    <div class="container">
    
    	<div class="col-sm-4"><img class="img-responsive img-circle" src="images/blue.png"><br />
    		<div class="counter">
    			<script type="text/javascript"> document.write(bluecount);</script>09
    		</div>	
    	</div>
    	<div class="col-sm-4"><img class="img-responsive img-circle" src="images/red.png"><br />
    		<div class="counter">
    			<script type="text/javascript"> document.write(redcount);</script>18
    		</div>
    	</div>
    	<div class="col-sm-4"><img class="img-responsive img-circle" src="images/green.png"><br />
    		<div class="counter">
    			<script type="text/javascript"> document.write(greencount);</script>03
    		</div>
    	</div>
        <div class="clearfix"></div>
        
    <div class="col-sm-4">
    <form>
    <input id="btn" type="button" value="PUSH ME!" onClick="throwdice()">
    </form>
    </div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4">
    <img class="img-responsive winner" src="images/blue.png" name="mydice">
    </div>
    </div><!-- container -->
    <script>
    function throwdice(){
    //create a random integer between 0 and 2
    var randomdice=Math.round(Math.random()*2)
    document.images["mydice"].src=eval("face"+randomdice+".src")
    }
    </script>

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    No No No !!!

    Code:
    document.write(bluecount)
    you don't use document.write because it replaces what code is present in the page

    You don't use
    Code:
    eval("face"+randomdice+".src")
    like that, you only use eval when you have no other way of rendering or resolving a problem in a script, many programmers preach that eval is evil, it is not and it has its place, however the way in which you are using it constitutes abuse of the function in many's eyes.

    Just set the src by this method.


    Code:
    function throwdice(){
    //create a random integer between 0 and 5 then add 1 to ensure a 1 to 6 return
    var randomdice=Math.round(Math.random()*5)+1;
    document.images["mydice"].src= "face"+randomdice+".jpg";
    }
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Jun 2014
    Posts
    3
    \\.\ - Hit by a bus? - not quite! - - Many thanks.
    Code:
    document.write(bluecount)
    If this is wrong, what should I be using?
    Also, do you have the time to go over the rest of the challenge with me?
    Many thanks

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    You can store in an input tag or a div tag the content, bit like when updating the image tag, you can either...

    [HTML]<div class="counter" id="greencounter">
    <script type="text/javascript"> document.write(greencount);</script>03
    </div>
    [HTML]

    then in your page you would use a getElementById(...) method to get the element content if needed or simply write to that element.

    Code:
    var greencountcurrent = document.getElementById("greencounter").innerHTML; // gets the current content which includes any HTML
    I will assume that the only content will be plain text and numeric, therefor to get a numerical value you can use the parseInt() method or a short cut of subtracting zero

    Code:
    var greencountcurrent = document.getElementById("greencounter").innerHTML - 0;
    This then makes greencountcurrent contain a number that you can add another number to, if you didn't make the content numeric it would be a string, so if you were to add a number to it, the result would append that number and not increment it.

    This makes the greencountcurrent variable useful if you want to do some math with it.

    Then... storing it back is simply

    Code:
    document.getElementById("greencounter").innerHTML = theNewValue;
    where theNewValue is whatever you want displayed.

    So the DIV now becomes
    HTML Code:
    <div class="counter" id="greencounter">0</div>
    You will need to remember that the DOM objects do not become available UNTIL the HTML page has finished loading, so any scripts in your head must be written so that you can check to see if they are available so as not to throw any errors.


    Code:
    <script>
    function throwdice(){
    	//create a random integer between 0 and 2
    	var randomdice=Math.round(Math.random()*5)+1;
    	var colour = Math.round(Math.random()*2)+1;
    	document.images["mydice"].src= "../images/"+randomdice+".jpg";
    	var greencountcurrent = document.getElementById("greencounter").innerHTML - 0;
    	var bluecountcurrent = document.getElementById("bluecounter").innerHTML - 0;
    	var redcountcurrent = document.getElementById("redcounter").innerHTML - 0;
    	
    	switch( colour ){
    		case 1: document.getElementById("greencounter").innerHTML = greencountcurrent+1;
    		break;
    		case 2: document.getElementById("bluecounter").innerHTML = bluecountcurrent+1;
    		break;
    		case 3: document.getElementById("redcounter").innerHTML = redcountcurrent+1;
    		break;
    	
    	}
    }
    </script>
    This is a bit rough, not exactly how I would code it but it works and demonstrates the way to access DOM elements by an ID, remember that all IDs have to be unique.

    I would likely try it like this
    Code:
    <script>window.onload = function(){
    
    targets = ["greencounter","bluecounter","redcounter"];
    count = {};
    for(t in targets){
    	count[ t ] = {};
    	count[ t ].name = targets[t];
    	count[ t ].target = document.getElementById( targets[t] );
    	count[ t ].value = document.getElementById( targets[t] ).innerHTML - 0;
    }
    
    }// end of window onload
    
    
    
    function throwdice(){
    	//create a random integer between 0 and 2
    	var randomdice=Math.round(Math.random()*5)+1;
    	var colour = Math.round(Math.random()*2)+1;
    	document.images["mydice"].src= "../images/"+randomdice+".jpg";
    
    	count[ colour-1 ].value++;
    	count[ colour-1 ].target.innerHTML = count[ colour-1 ].value;
    }
    </script>
    with the use of an object to track the elements and just update them as needed.

    The Random number generator could be better, if you search on the subject of generating a random number for dice, you will find plenty of methods
    Last edited by \\.\; 07-05-2014 at 09:07 AM. Reason: Typo
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

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