www.webdeveloper.com
Results 1 to 3 of 3

Thread: Comparing textbox results

  1. #1
    Join Date
    Jul 2014
    Posts
    15

    Comparing textbox results

    Hello,

    I'm creating a simple game for a class and below is the code I have but I'm stumped as to how to compare values.

    Basically, when you hit the "Play!" button, it should generate a random integer between 0 and 20. The user has four tries to guess that random integer by inputing it into the "Human Player" field and hitting "Submit. The random integer is supposed to be hidden (behind the scenes) obviously since you're guessing, but for learning purposes I'd prefer to first figure out how to compare the random integer with the submitted integer first.

    When I enter the number that was generated and hit submit, it should return "Winner!" in the "Computer Player" field, but I can't get that result, any suggestions on this? I'm 99% sure I did something wrong with the document.write...

    The follow up would be, what are some methods to build the four try system? Basically the user has four tries to guess the integer, if incorrect, it should tell you higher or lower.

    JS
    Code:
    function playgame() {
        var x = Math.floor((Math.random() * 20) + 0);
        document.getElementById("computer").value = x;		
    }
    function submitanswer() {
    	var y = document.getElementById("player").value;
    	if (y = x){
    		document.write("<b>Winner!</b>");
    	}
    }
    HTML
    Code:
    <body>
    <p>To play, simply hit the "Play!" button for the computer to generate a random number between 0 and 20. From here you have four guesses to guess that number. Each guess, enter your number in the "Human Player" field and hit submit. If you guess correctly within four tries you win! Good luck!</p><br />
    Computer Player: <input type="text" id="computer" /><br /><br />
    Human Player: <input type="text" id="player" /><br /><br />
    <button onclick="playgame()">Play!</button><br /><br />
    <button onclick="submitanswer()">Submit</button>
    </body>

  2. #2
    Join Date
    Oct 2013
    Posts
    486
    There's this really cool feature on most browsers called a "console". It will show the errors on a page or in a script and give you the line number to work with. In your case it shows that 'x' is not defined in function submitanswer(). Why? Well, you didn't declare it as a variable in that function, nor did you pass it from the playgame function. Therefore it doesn't exist.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    function playgame() {
        var x = Math.floor((Math.random() * 20) + 0);
        document.getElementById("computer").value = x;		
    }
    function submitanswer() {
    	var y = document.getElementById("player").value,
    	    x = document.getElementById("computer").value;  // added to get rid of error
    	if (y = x){
    		document.write("<b>Winner!</b>");
    	}
    }
    </script>
     
    <title>Untitled Document</title>
    </head>
    
    <body>
    <p>To play, simply hit the "Play!" button for the computer to generate a random number between 0 and 20. From here you have four guesses to guess that number. Each guess, enter your number in the "Human Player" field and hit submit. If you guess correctly within four tries you win! Good luck!</p><br />
    <p>Computer Player: <input type="text" id="computer"></p>
    Human Player: <input type="text" id="player"></p>
    <p><button onclick="playgame()">Play!</button><br>
    <button onclick="submitanswer()">Submit</button></p>
    </body>
    </html>
    And even at that I end up as a Winner! no matter the number I enter. But because you're the student I'll let you figure that out. Hint: you are missing one character, an = sign, in your code.

    Although there's no code for the "you have four guesses" statement.

  3. #3
    Join Date
    Oct 2013
    Posts
    486
    OK, I'm relenting on my harsh lesson above

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Number Game</title>
    <style>
    #result {
    	font: 2em bold;
    }
    .red {
    	color: red;
    }
    .green {
    	color: green;
    }
    </style>
    <script>    
    onload = function() {
        var x = Math.floor((Math.random() * 20) + 0);
        document.getElementById('computer').value = x;		
    }
    function submitanswer(c,p,r) {
    	if ((p == '') || (p < '0') || (p > '20')) {
    		r.innerHTML = 'Learn to follow instructions.<br>Try again.';
    	}
    	else{
    		if (c == p){
    			r.innerHTML = 'Winner!<br><button onclick="window.location.reload()">Play again</button>';
    			r.className = 'green';
    		}
    		else {
    			r.innerHTML = 'Put a big "L" on your forehead!<br>Try again.';
    			r.className = 'red';
    		}
    	}
    }
    function hideresult(r) {
    	r.innerHTML = '';
    }
    </script>
     
    </head>
    
    <body>
    <p>The computer has generated a random number from 0 to 20. See if you can match it. Enter your number in the "Human Player" field and click submit. If you guess correctly you win! Good luck!</p>
    
    <p><input type="hidden" id="computer">
    Human Player: <input type="number" min="0" max="20" id="player" placeholder="0-20" onfocus="hideresult(result)"> <button onclick="submitanswer(computer.value,player.value,result)">Submit</button></p>
    
    <div id="result"></div>
    </body>
    </html>
    Promise me you'll drop this class. Not that you aren't smart enough to pass it, even excel in it. The stuff you're learning is 15+ years old. document.write? Really? The last time I used that was for a browser sniffer script I had on a website in 1997-8. It detected IE or .... Netscape(!). Based on which it "smelled" it wrote an appropriate line in the HTML. Seriously, even w3schools has more up-to-date code than you've been posting here. And their tuts are free!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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