CODEWITHSUNDEEP
javascript
Gizmobart
Gizmobart

Reputation: 11

How to get output from console.log when it is a HTML file

I have just started learning JavaScript and have just made my first program a simple guess a number game. To give the user feed back about there guesses, I used console.log(). It worked on the website that I used to learn JavaScript (http://www.codecademy.com/learn), but when I put it in Notepad, saved it an .htm file, and run it, I get the prompts and confirm, but no visible feed back from the console.log command.

How can I get the console.log command to work?

Here is the code: 

<Script language="JavaScript">
    confirm("Are you ready to play 'I CAN GUESS THAT'? A game where Player 2 tries to guess player 1 number?");

    //find out names
    var player1 = prompt("Player 1 what is your name?","Your name here");
    var player2 = prompt("Player 2 what is your name?","Your name here");

    //player 1 number
    var place_holder = 0; 
    var p1 =place_holder;
    while (p1 > 1000 || p1 == 0) {
        p1 = prompt(player2 + "look away." + " " + player1 + " " + "what is your number?", "Your number from 1 to 1,000 here");

        if (p1 != parseInt(p1)) {
            p1 = 0;
            console.log("Error: Invalled Number!" + " " +player1 + " " + "Please choose a number between 1 and 1,000");
        }
        else if(p1>1000) {
            console.log("Error: Invalled Number!" + " " +player1 + " " + "Please choose a number between 1 and 1,000");
        }
    };

    //set up used guess list
    var listlow = [];
    var listhigh = [];
    var x = 0;
    var p2 = place_holder;

    //game 
    while (x < 11) {
        //list used guesses
        console.log("Your guess so far");
        console.log("Your to low guesses:"+" " + listlow);
        console.log("Your to high gusses:"+" " + listhigh);

        //player 2 guess
        var p2 = prompt("Player 2 what is your guess?");

        //good guess
        var test = p1/p2;
        if (test === 1) {
            console.log("Congrats" + " " + player2 +" "+ "You have guessed"+" " + " " + player1 +" "+ "number");
            var x = 30;

        //to low
        }
        else if (test > 1) {
            console.log(player2 +" "+ "Sorry your guess is to low");
            listlow.push(p2);
            x=x+1;

        //to high
        }
        else if (test <1) {
            console.log(player2 +" "+ "Sorry your guess is to high");
            listhigh.push(p2);
            x=x+1;

        //something went wrong
        }
        else {
            console.log("Opps something went wrong");
        }
    };

    if (x < 20) {
        console.log("Sorry" + " " +player2+ " "+ "You are out of guesses." +" " + player1+ " " + "wins!");
    }

    console.log("Thanks for playing")
</SCRIPT>

Upvotes: 0

Views: 1586

Answers (3)

talemyn
talemyn

Reputation: 7940

The issue here is that CodeAcademy has a built-in console in their coding tool, that is shown to you as you are working on their code in the Code Academy environment. This is specifically to help you while you are building your code.

Consoles are avaiable in most (modern) browsers, but they are generally hidden by default, because they are primarily used by developers, not by the everyday user. As such, writing messages out to a user in the console is not going to be an effective way to communicate with them.

There are MANY ways that you can provide feedback to a user . . . some ideas include:

  • set up a <div> on your page, specifically for messaging and update the contents of the div with the messages
  • set up a <textarea> on your page, specifically for messaging and update the value of the field with the messages
  • use alert(MESSAGE_VALUE); to display your messages in a popup window

How you decide to do it really depends on what kind of experience that you want your users to have . . . it is entirely up to you.

Upvotes: 1

deadboy
deadboy

Reputation: 859

Here is a simple way to display info on your page.

HTML

<p id = "output"></p>

JavaScript

// Overwrites content in the output tag
function printText(str) {
    document.getElementById("output").innerHTML = str;
}

OR

// Adds more content to the output tag
function printText(str) {
    document.getElementById("output").innerHTML += str + "<br />";
}

Then to display something to the user call printText("some text") as needed.

This is just a starting point, there are dozens of ways to convey information to the user, but hopefully this should be a start for what you're looking to do.

Upvotes: 0

Darin
Darin

Reputation: 428

The console API is only meant to be used for debugging purposes, not for outputting messages or other information to the user.

If you want to output messages to the screen, I suggest you use document.write() instead of console.log().

document.write will print out the message directly to your web browser (i.e. the page's HTML body).

You can find more information about the document.write() function here: https://developer.mozilla.org/en-US/docs/Web/API/Document/write

Upvotes: 0

Related Questions