JavaScript guessing game. Keeping a log of guesses

Question

This is a homework assignment for school, the basic game works fine, but I would like to display a running tab of the user's guesses each time they guess. I've read ways to do it with JQuery, but we're only supposed to use JavaScript for this assignment. Basically what I want is each time they enter a guess, it will add a line to the HTML page that says something like "You guessed #, too high/low." On the next guess, it will keep that line, and then add another. I tried messing with innerHTML to get it, but it wasn't working how I wanted it to, wouldn't keep the previous guess on the page. I'd appreciate any help. Thanks.

<html>
<head>
<title> JS guessing game </title>


<script type="text/javascript">
    var ranNum;

    function playGame() {

        var answer;
        var found = false;
        var count = 10;

        while ((count > 0) && (found == false)) {
            answer = prompt("Guess a number between 1 and 50!");
            if (answer > ranNum) { alert("Guess lower!"); }
            if (answer < ranNum) { alert("Guess higher!!"); }
            if (answer == ranNum) { alert("Correct!"); found = true; }
            count--;
        }
        if (!found) { alert('Too bad, you lose ... The number was ' + ranNum); }
        return found;
    }
    function generateRandomNumber() {
        ranNum = Math.floor(Math.random() * 50) + 1;
    }
    window.onload = function () { generateRandomNumber(); }
</script>
</head>
<body>
<strong> Guess a random number </strong>
     <input type="button" value="Play game" onclick="playGame()">
     <input type="button" value="New game" onclick="generateRandomNumber()">
</body>
</html>

I'm not gonna answer this directly because it will be far more beneficial for you to work it out - however your code seems like you've made a decent stab at it. You need to have an element on the page that you can update with the guess info. Look into document.getElementById or document.querySelector and createElement and appendChild. Happy hunting :) — Woody, May 22 '15 at 08:56
You can use `innerHTML` like this : `document.body.innerHTML += "
a new line
";` — Hacketo, May 22 '15 at 08:58
There is just a syntax error : `fnd`is an undefined var, you should replace it with `found`. — jmgross, May 22 '15 at 08:58
You can create new `div` dynamically and add it to the body. For example like here: http://stackoverflow.com/questions/15741006/adding-div-element-to-body-or-document-in-javascript#answer-15743136 — kreig, May 22 '15 at 08:58
@Woody thanks, I'm not trying to directly ask for the answer, just guidance, I'll try to work something out base on your input. — bnr32jason, May 22 '15 at 09:04

score 1 · Accepted Answer · answered May 22 '15 at 08:59

1

Add a new span to your HTML:

 <span id="guesses"></span>

Then javascript you can append answers to it:

document.getElementById('guesses').InnerHTML += "Insert text here <br/>";

answered May 22 '15 at 08:59

Anonymoose

2,389
6
36
69

Would the JavaScript addition go into each if statement separately? Or somewhere else in the decision structure? Thanks! – bnr32jason May 22 '15 at 09:07
Ok, I got it all in the right places. Thanks for the help! – bnr32jason May 22 '15 at 09:15

score 1 · Answer 2 · answered May 22 '15 at 09:03

Sample working:

<head>
<script>
    var ranNum;

    function playGame() {

        var answer;
        var found = false;
        var count = 10;
        var guesses = document.getElementById('yourgueses');
        guesses.innerHTML = "";

        while ((count > 0) && (found == false)) {
            answer = prompt("Guess a number between 1 and 50!");
            guesses.innerHTML += answer + " "
            if (answer > ranNum) { alert("Guess lower!"); }
            if (answer < ranNum) { alert("Guess higher!!"); }
            if (answer == ranNum) { alert("Correct!"); fnd = true; }
            count--;
        }
        if (!found) { alert('Too bad, you lose ... The number was ' + ranNum); }
        return found;
    }
    function generateRandomNumber() {
        ranNum = Math.floor(Math.random() * 50) + 1;
    }
    window.onload = function () { generateRandomNumber(); }
</script>
<head/>
<title> JS guessing game </title>

<body>
<strong> Guess a random number </strong>
 <input type="button" value="Play game" onclick="playGame()"/>
 <input type="button" value="New game" onclick="generateRandomNumber()"/>
<br/>
<strong> Your Guesses: </strong>
<div id="yourgueses"></div>

https://jsfiddle.net/qw9z5ydv/

By the way, consider adding a break clause inside while if answer is null (user cancels prompt) it gets too annoying.

Thanks! Yeah I'm not completely done yet. Have to add checks (parse) and the break statement. — bnr32jason, May 22 '15 at 09:16

saikumarm · Answer 3 · 2015-05-22T09:23:05.227

From the look of your script, I see you are not using only alert statements to inform user. Instead you could use DOM, Document Object Model and get access to the tags in on the HTML page and manipulate their content.

var body = document.getElementsByTagName("body")[0]; body.innerHTML = body.innerHTML + "You should guess Respectively";

Yet a better approach would be dedicate a tag for the message you want to give the user and VIA DOM you can manipulate content. More over it is a principle to avoid using innerHTML while using DOM.

window.onload = runs;

function runs()
{
    var input = document.getElementsByTagName("input")[0];
    input.onclick = printMessage;
}

function printMessage()
{
    var para = document.getElementById("helper");
    var txt = document.createTextNode("help Respectively");
    var br = document.createElement("br");
    para.appendChild(txt);
    para.appendChild(br);
}

<input type="button" value="Press"/>
<p id="helper"></p>

JavaScript guessing game. Keeping a log of guesses

3 Answers3