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
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy 3 digit guessing game, please help debug

    I'm not sure where I went wrong, looking for some direction as to why this won't run for me. I have a .html and an external .js

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>Lottery Game</title>
    		<script src="lotto.js" type="text/javascript" language="javascript"></script>
    		<script src="http://code.jquery.com/jquery-1.6.3.min.js">
    		</script>
    	</head>
    	<body>
    		<form>
    			<p>Welcome to the lottery game!<p>
    			<p>Here's how it works:</p>
    			<p>Guess three numbers from 0 to 9.<br>
    			Any one matching number wins $10.<br>
    			Two matching numbers wins $1000.<br>
    			Three matching numbers, in exact order, wins $1,000,000.<br>
    			No matches wins nothing.</p>
    			<p>Your guess for the first number: <input type="text" name="user1" id="user1" /><br>
    			Your guess for the second number: <input type="text" name="user2" id="user2" /><br>
    			Your guess for the third number: <input type="text" name="user3" id="user3" /><br>
    			<input type="button" value="Give me my winning numbers!" onClick="lotto();" />
    			</p>
    		</form>
    	</body>
    </html>
    JS:
    Code:
    <script type="text/javascript" language="javascript"></script>
    <script src="http://code.jquery.com/jquery-1.6.3.min.js">
    </script>
    <script>
    	var max = 10;
    	var min = 1;
    	var lottonum = [];
    	var count = 3;
    	
    	//Generate 3 digit random in an array
    	do {
    		var num = Math.floor(min + (1 + max -min) * Math.random());
    			lottonum.push(num);
    	} while (lottonum.length < count); 
    	
    	
    	
    	function lotto() {
    		var user1Field = $('#user1');
    		var guess1 = $('#user1').val();
    		
    		var user2Field = $('#user2');
    		var guess2 = $('#user2').val();
    		
    		var user3Field = $('#user3');
    		var guess3 = $('#user3').val();
    		
    		if (guess1 <= 10 && guess1 >= 0 && guess2 <= 10 && guess2 >= 0 && guess3 <= 10 && guess3 >= 0) {
    			document.write ('The winning numbers are: ' + lottonum[0,1,2]);
    		} else {
    			document.write ('Please enter a number between 0 and 9 for each guess, and we can play.');
    			}
    			
    		if (guess1 == lottonum[0] && guess2 == lottonum[1] && guess3 == lottonum[2]) {
    			document.write ('You guessed: ' + guess1 + ' ' + guess2 + ' ' + guess3 + ' ' + 'You won $1,000,000! Congratulations!');
    		} else if (((guess1 == lottonum[0] || guess1 == lottonum[1] || guess1 == lottonum[2]) && (guess2 == lottonum[0] || guess2 == lottonum[1] || guess2 == lottonum[2])) || ((guess1 == lottonum[0] || guess1 == lottonum[1] || guess1 == lottonum[2]) && (guess3 == lottonum[0] || guess3 == lottonum[1] || guess3 == lottonum[2])) || ((guess2 == lottonum[0] || guess2 == lottonum[1] || guess2 == lottonum[2]) && (guess3 == lottonum[0] || guess3 == lottonum[1] || guess3 == lottonum[2])) {
    			document.write ('You guessed: ' + guess1 + ' ' + guess2 + ' ' + guess3 + ' ' + 'You matched two numbers!  You won $1000!');
    		} else if ((guess1 == lottonum[0] || guess1 == lottonum[1] || guess1 == lottonum[2]) || (guess2 == lottonum[0] || guess2 == lottonum[1] || guess2 == lottonum[2]) || (guess3 == lottonum[0] || guess3 == lottonum[1] || guess3 == lottonum[2]) {
    			document.write ('You guessed: ' + guess1 + ' ' + guess2 + ' ' + guess3 + ' ' + 'You have one matching number.  You won $10!');
    		} else {
    			document.write ('You guessed: ' + guess1 + ' ' + guess2 + ' ' + guess3 + ' ' + 'You did not match any numbers.  You lose.');
    		}
    	}
    </script>
    The html seems to work just fine, but the function lotto() does not run when the button is clicked, and I'm not sure why. Any help in directing me where I went wrong would be much appreciated! Thanks in advance.
    Last edited by VIPStephan; 03-15-2013 at 10:34 PM. Reason: fixed code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Use the hash mark # located above you in the tool bar to generate the [code] tags.

    I did change your code a bit. Your problem was in the else if's

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Lottery Game</title>
    <script type="text/javascript" src="lotto.js" ></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    
    <script type="text/javascript" language="javascript">
    var max = 10;
    var min = 1;
    var lottonum = new Array();  // MORE BETTER :)
    var count = 3;
    var winner = 0;  //  ADDED
    
    //Generate 3 digit random in an array
    do {
    	var num = Math.floor(min + (1 + max -min) * Math.random());
    	lottonum.push(num);
    } while (lottonum.length < count);
    
    function lotto() {
    var user1Field = $('#user1');
    var guess1 = $('#user1').val();
    var user2Field = $('#user2');
    var guess2 = $('#user2').val();
    var user3Field = $('#user3');
    var guess3 = $('#user3').val();
    var winner = '';
    
    if (guess1 <= 10 && guess1 >= 0 && guess2 <= 10 && guess2 >= 0 && guess3 <= 10 && guess3 >= 0) {
    document.write ('The winning numbers are: ' + lottonum[0]+" - "+lottonum[1]+" - "+lottonum[2]+"<br />");
    } else {
    	document.write ('Please enter a number between 0 and 9 for each guess, and we can play.');
    }
    /*USE WHATS BELOW TO SEE ALL COMBOS*/
    /*
    var winner = 0;
    var guess1 = 3;
    var guess2 = 2;
    var guess3 = 1;
    lottonum[0] = 3;
    lottonum[1] = 2;
    lottonum[2] = 1;
    */
    
    if(guess1 == lottonum[0]) winner++;
    if(guess2 == lottonum[1]) winner++;
    if(guess3 == lottonum[2]) winner++;
    if(winner == 0) document.write('You did not match any numbers. You lose.');
    if(winner == 1) document.write('You have one matching number. You won $10!');
    if(winner == 2) document.write('You matched two numbers! You won $1000!');
    if(winner == 3) document.write('You won $1,000,000! Congratulations!');
    
    }
    </script>
    
    </head>
    <body>
    <form>
    <p>Welcome to the lottery game!<p>
    <p>Here's how it works:</p>
    <p>Guess three numbers from 0 to 9.<br>
    Any one matching number wins $10.<br>
    Two matching numbers wins $1000.<br>
    Three matching numbers, in exact order, wins $1,000,000.<br>
    No matches wins nothing.</p>
    
    <p>Your guess for the first number: <input type="text" name="user1" id="user1" /><br>
    Your guess for the second number: <input type="text" name="user2" id="user2" /><br>
    Your guess for the third number: <input type="text" name="user3" id="user3" /><br>
    <input type="button" value="Give me my winning numbers!" onclick="lotto();" />
    
    </p>
    </form>
    </body>
    </html>
    Last edited by sunfighter; 03-15-2013 at 04:30 PM.

  • Users who have thanked sunfighter for this post:

    jessiemaewho (03-15-2013)

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Your external jQuery file should load before the external lotto.js file, I think. And they should both load just before the closing </body> tag.
    Last edited by WolfShade; 03-15-2013 at 04:30 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    I don't use JQuery, so that part you'll need to work out yourself.

    However, concerning the 'document.write()' statements:
    You cannot execute those statements AFTER the page has initially displayed.
    Doing so will cause the display to change to the INITIAL conditions of the display
    and you will lose all input you have made during your guessing process.

    Consider writing to a <div> section using 'getElementById('elementNameToWriteTo').innerHTML = '????'

  • #5
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thank you Sunfighter! I changed it a bit, so guess2 can match lottonum[0] etc...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>Lottery Game</title>
    		<script src="http://code.jquery.com/jquery-1.6.3.min.js">
    		</script>
    <script type="text/javascript" language="javascript">
    var max = 10;
    var min = 1;
    var lottonum = new Array();  
    var count = 3;
    var winner = 0;  
    
    //Generate 3 digit random in an array
    do {
    	var num = Math.floor(min + (1 + max -min) * Math.random());
    	lottonum.push(num);
    } while (lottonum.length < count);
    
    function lotto() {
    var user1Field = $('#user1');
    var guess1 = $('#user1').val();
    var user2Field = $('#user2');
    var guess2 = $('#user2').val();
    var user3Field = $('#user3');
    var guess3 = $('#user3').val();
    var winner = '';
    
    if (guess1 <= 10 && guess1 >= 0 && guess2 <= 10 && guess2 >= 0 && guess3 <= 10 && guess3 >= 0) {
    document.write ('The winning numbers are: ' + lottonum[0] + " - " + lottonum[1] + " - " + lottonum[2] + "<br />");
    } else {
    	document.write ('Please enter a number between 0 and 9 for each guess, and we can play.');
    }
    
    if (guess1 == lottonum[0] || guess1 == lottonum[1] || guess1 == lottonum[2]) winner++;
    if (guess2 == lottonum[0] || guess1 == lottonum[1] || guess1 == lottonum[2]) winner++;
    if (guess3 == lottonum[0] || guess1 == lottonum[1] || guess1 == lottonum[2]) winner++;
    if (guess1 == lottonum[0] && guess2 == lottonum[1] && guess3 == lottonum[2]) winner++;
    if (winner == 0) document.write('You guessed ' + guess1 + " - " + guess2 + " - " + guess3 + '. You did not match any numbers. You lose.');
    if (winner == 1) document.write('You guessed ' + guess1 + " - " + guess2 + " - " + guess3 + '. You have one matching number. You won $10!');
    if (winner == 2) document.write('You guessed ' + guess1 + " - " + guess2 + " - " + guess3 + '. You matched two numbers! You won $1000!');
    if (winner == 3) document.write('You guessed ' + guess1 + " - " + guess2 + " - " + guess3 + '. You matched three numbers, but in the wrong order. You won $10,000!');
    if (winner == 4) document.write('You guessed ' + guess1 + " - " + guess2 + " - " + guess3 + '. You won $1,000,000! Congratulations!');
    
    }
    </script>
    	</head>
    	<body>
    		<form>
    			<p>Welcome to the lottery game!<p>
    			<p>Here's how it works:</p>
    			<p>Guess three numbers from 0 to 9.<br>
    			Any one matching number wins $10.<br>
    			Two matching numbers wins $1000.<br>
    			Three matching numbers, in exact order, wins $1,000,000.<br>
    			No matches wins nothing.</p>
    			<p>Your guess for the first number: <input type="text" name="user1" id="user1" /><br>
    			Your guess for the second number: <input type="text" name="user2" id="user2" /><br>
    			Your guess for the third number: <input type="text" name="user3" id="user3" /><br>
    			<input type="button" value="Give me my winning numbers!" onClick="lotto();" />
    			</p>
    		</form>
    	</body>
    </html>

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    Alternative solution ... just for fun!
    Compressed the code a little, especially in the logic tests.
    I also added check to assure the user only enters valid numbers 0...9

    I did not see the need to use a sledge-hammer (JQuery) on a tack.
    I also modified your game to add a bit of gambling by causing each lotto number to cost you $5

    Finally, I made it so that you did not have to re-start the game for each bet.
    Just click on the button for another random number.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Lottery Game</title>
    </head>
    <body>
    
    <form>
     <p>Welcome to the lottery game!</p>
     <p>Here's how it works:</p>
     <p>Guess three numbers from 0 to 9.<br>
      Any one matching number wins $10.<br>
      Two matching numbers wins $50.<br>
      Three matching numbers, in any order, wins $1,000.<br>
      Three matching numbers, in exact order, wins $10,000.<br>
      No matches wins nothing, but will cost you $5 to play.</p>
     <p>Your guess:
      <input type="text" name="user1" id="user1" size="3" value="" />
      <input type="text" name="user2" id="user2" size="3" value="" />
      <input type="text" name="user3" id="user3" size="3" value="" />
      <input type="button" value="Give me my winning numbers!" onclick="lotto()" /></p>
     <div id="results"></div>
    </form>
    
    <script type="text/javascript">
    
    Array.prototype.shuffle = function() {
      var s = []; 
      while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
      while (s.length) this.push(s.pop());
      return this;
    } 
    var bet = 5;
    var total = 0;
    
    function lotto() {                    //Generate 3 digit random in an array
    
      function checkGuess(num) {
        var lot = lottonum.slice(0,3).join('');
        if (lot.indexOf(num) == -1) { return 0 }
        return 1;
      }
    
      var winner = 0;
      var lottonum = [];  for (var i=0; i<10; i++) { lottonum.push(i); }
      lottonum.shuffle();
    
      var g1 = document.getElementById('user1').value;
      var g2 = document.getElementById('user2').value;
      var g3 = document.getElementById('user3').value;
      var msg = '';
    
      if ( (g1<0) || (g1>9) || (g2<0) || (g2>9) || (g3<0) || (g3>9)
        || (g1==g2) || (g1==g3) || (g2==g3) || isNaN(g1) || isNaN(g2) || isNaN(g3) ) {
        msg = 'Invalid guess value(s)';
      } else {
        msg = 'Winning numbers: ' + lottonum.slice(0,3).join(' - ')+"<br />";
        winner += checkGuess(g1);    winner += checkGuess(g2);    winner += checkGuess(g3);
        if ( (g1==lottonum[0]) && (g2==lottonum[1]) && (g3==lottonum[2])) { winner = 4; }
        switch (winner) {
          case 1: total += 10;    msg += '. <br>You have one matching number. You won $10!'; break;
          case 2: total += 50;    msg += '. <br>You matched two numbers! You won $50!'; break;
          case 3: total += 1000;  msg += '. <br>You matched three numbers, but in the wrong order. You won $1,000!'; break;
          case 4: total += 10000; msg += '. <br>You won $10,000! Congratulations!'; break;
         default: total -= bet;   msg += '. <br>You did not match any numbers. You lose sucker!.'; break;
        }
        msg += "<br>Winnings $"+total;
      }
      document.getElementById('results').innerHTML = msg;  //   +'<br>winner: '+winner;  // for testing purposes
    }
    
    </script>
    </body>
    </html>


  •  

    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
    •