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

Question

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>

The average non-webdev user does not know what the javascript console is, if you need to give feedback to the user you should put it somewhere in the actual page, ie in a popup div or similar — Patrick Evans
– Patrick Evans, Commented May 29, 2015 at 15:48
A tiny bit of jQuery would go a long way here. The append() method is an easy way to add something visible on your page. As a note, writing "interactive" applications like this, something you might find in a "how to code" book from the 1970s, is really contrary to how a web page works. It'd be much better to create a proper form and hook up buttons and input fields to your code. — tadman
– tadman, Commented May 29, 2015 at 15:51

talemyn · Accepted Answer · 2015-05-29 16:06:20Z

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.

Darin · Accepted Answer · 2015-05-29 15:55:15Z

0

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

answered May 29, 2015 at 15:55

Darin

4281 gold badge4 silver badges16 bronze badges

Comments

Darin · Accepted Answer · 2015-05-29 16:02:06Z

0

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.

edited May 29, 2015 at 16:02

Darin

4281 gold badge4 silver badges16 bronze badges

answered May 29, 2015 at 15:55

deadboy

8592 gold badges9 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

HTML

JavaScript

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

HTML

JavaScript

Comments

Your Answer

Sign up or log in

Post as a guest

Related