Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
Like Tree2Likes
  • 1 Post By rnd me
  • 1 Post By Philip M

Thread: Help With Numbers Game Using Javascript

  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Help With Numbers Game Using Javascript

    Hello all.

    I'm almost finished with my Numbers Game using javascript, but something just isn't right.

    PROBLEM:

    When I click the buttons, the result displays correctly in a <div> I created in the HTML, but two things go wrong:

    1. My random number keeps regenerating (Every time I click on a button, it restarts the script)
    2. My # of tries does not decrease



    CODE:
    (It's a simple program with the javascript written right into the HTML)

    Code:
    <!--
    
    Author: 
    Date:	
    
    -->
    
    <!DOCTYPE html>
    	<head>
    		<title>The Number Game</title>
    		
    <script type="text/javascript">
    		
    alert('Welcome to the NUMBER GAME! You are given a limited number of tries. You must locate the' + 'secret' + 'number before you run out of tries.');
    
    </script>
    	</head>
    	<body>
    	
    <script type="text/javascript">
    function Game(attempt) {
    
    var trys = 3;
    var myNumber = Math.floor((Math.random() * 9) + 1);
    
    	if (attempt == myNumber)
    	{	
    	//document.writeln('You guessed the number! Good job!');
    	document.getElementById("result").innerHTML = "You guessed correctly. Good job!";
    	}
    
    	if (attempt >= myNumber)
    	{
    	//document.writeln('Too high! Try picking a lower number.')
    	document.getElementById("result").innerHTML = "You guessed too high! Try going lower.";
    	trys--;
    	}
    
    	if (attempt <= myNumber)
    	{
    	//document.writeln('Too low! Try picking a higher number.')
    	document.getElementById("result").innerHTML = "You guessed too low! Try going higher.";
    	trys--;
    	}
    
    }
    </script>
    
    		<header>
    			<h1><img src="Numbers.png" align="bottom" width="100" height="100" />Welcome to the Number Game!<img src="Numbers.png" align="bottom" width="100" height="100" /></h1>
    		</header>
    
    		<section>
    			<p><strong>Instructions:</strong>Click on any of the buttons below to try and guess the "secret" number.
    						You are given a limited number of tries so choose wisely. <img src="wink.png" /></p>
    		<input type="button" name="bt1" value="1" onClick="Game(1);" />
    		<input type="button" name="bt2" value="2" onClick="Game(2);" />
    		<input type="button" name="bt3" value="3" onClick="Game(3);"/><br />
    		<input type="button" name="bt4" value="4" onClick="Game(4);"/>
    		<input type="button" name="bt5" value="5" onClick="Game(5);"/>
    		<input type="button" name="bt6" value="6" onClick="Game(6);"/><br />
    		<input type="button" name="bt7" value="7" onClick="Game(7);"/>
    		<input type="button" name="bt8" value="8" onClick="Game(8);"/>
    		<input type="button" name="bt9" value="9" onClick="Game(9);"/>
    		<p id="result"></p>
    		</section>
    
    		<footer>
    			<p>The Number Game &copy; 2014</p>
    		</footer>
    	</body>
    </html>
    WHAT I'M LOOKING FOR:
    1. A better way to implement the "Game(#)" function so that I can keep running the same code and keep the random number from regenerating.
    2. Confirmation if the "# of trys" are actually decreasing, and if not, a better way to implement this is well.
    3. Productive criticism. I'm relatively new to javascript and would appreciate any tips/tricks to make my code better.
    4. Possible way to add ("") to the first alert() function in my code (if it can be done)?



    NOTES:
    • I used "getElementByID()" and ".innerHTML" to avoid using Alert() functions as I read they tend to get annoying.
    • It's pretty basic-looking; that because I will use CSS to style it after I get the code working.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    move
    Code:
    var trys = 3;
    var myNumber = Math.floor((Math.random() * 9) + 1);
    out of the function so that it's not reset each time the function is called.
    CodeMonkey05 likes this.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    CodeMonkey05 (05-28-2014)

  • #3
    New to the CF scene
    Join Date
    May 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    @rnd me, thanks for the help. OK; well, the random number is sticking but now I can't get the "secret number" to register when it is hit. Both the "higher" and "lower" values work but the "secret number" (aka, the one I need to guess) will not register as me getting it or not.

    Here's the newly revised code:

    REVISED CODE:

    Code:
    <script type="text/javascript">
    var trys = 3;
    var myNumber = Math.floor((Math.random() * 9) + 1);
    </script>
    I took the "trys" and "myNumber" variable out of the "Game()" function. I still am having problems and need further help.

    PROBLEM:
    1) "Game()" still doesn't register that I've hit the "secret number"
    2) # of trys does not decrease even though I've wrote a statement for it to do so.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Although you count the number of tries there is nothing to prevent another try when the number of tries remaining sinks to zero.

    P.S. The plural of try is tries.

    Code:
    function Game(attempt) {
    if (tries <=0) {
    alert ("Sorry! You have used up all your tries.  Restart the game for another go");
    return false;
    }
    if (attempt >= myNumber)
    if (attempt <= myNumber)

    See what is wrong here?
    Last edited by Philip M; 05-27-2014 at 11:22 AM.
    CodeMonkey05 likes this.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    CodeMonkey05 (05-28-2014)

  • #5
    New to the CF scene
    Join Date
    May 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    @Phillip, you have helped me tremendously. I thank you for that. After reading your post, I looked up "if...else statements" and that was exactly what I needed. I was able to do multiple "if statements" with C++, but since Javascript is different, perhaps that doesn't work here?

    Anyways, the program is working now! Here is the revised Javascript code:

    Code:
    <script type="text/javascript">
    var tries = 3;
    var myNumber = Math.floor((Math.random() * 9) + 1);
    
    function Game(attempt) {
    
    if (tries <= 0) {
    document.getElementById("result").innerHTML = "You are out of tries (exceeded # of tries or guessed correctly). Refresh the page to try again.";
    } else if (attempt == myNumber) {	
    	//document.writeln('You guessed the number! Good job!');
    	document.getElementById("result").innerHTML = "You guessed correctly. Good job! Refresh the page to play again.";
    	tries = 0;
    	} else if (attempt >= myNumber) {
    	//document.writeln('Too high! Try picking a lower number.')
    	document.getElementById("result").innerHTML = "You guessed too high! Try going lower.";
    	tries--;
    	} else {
    	//document.writeln('Too low! Try picking a higher number.')
    	document.getElementById("result").innerHTML = "You guessed too low! Try going higher.";
    	tries--;
    	}
    
    }
    </script>
    Again. I can't thank you all enough for helping me.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    else if (attempt >= myNumber) {

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    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
    •