How to display text in Javascript?

Question

I have some functions and some variables. I would like to return a variable and the function outcome as text on my browser.

What I have done is I have made a HTML file with the text:

<SCRIPT SRC="rockpaper.js">
</SCRIPT>

And this refers to this javascript file:

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "Computer chooses rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "Computer chooses paper";
} else {
    computerChoice = "Computer chooses scissors";
}

console.log(computerChoice);

var compare = function(choice1,choice2)
{
    if(choice1===choice2)
    {
        return("The result is a tie!");
    }

    if(choice1==="Computer chooses rock")
    {
        if(choice2==="scissors")
        {
            return("rock wins");
        }
            else
            {
                return("paper wins");
            }
    }
    if(choice1==="Computer chooses paper")
    {
        if(choice2==="rock")
            return("paper wins");
            else
            {
                return("scissors wins");
            }
    }
    if(choice1==="Computer chooses scissors")
    {
        if(choice2==="rock")
        {
        return("rock wins");
        }
        else
        {
            return("scissors wins");
        }
    }
}

console.log(compare(computerChoice,userChoice))

However, when I open it with a browser, the text doesn't display, but the prompt does.

It works fine in Codecademy, though.

Have you opened up your browser console? The text should be displayed there. In case you are using Google Chrome, look for the console in Tools / Developer tools. — bagonyi
– bagonyi, Commented Dec 1, 2013 at 6:50
console.log() outputs to your browser console (hit f12 to bring it up). If you want to display the text to a browser window, you need to assign the return value to a var, then do document.write(var); — ryanlutgen
– ryanlutgen, Commented Dec 1, 2013 at 6:51
@BjarniJóhannsson if you do not know what a var is or how to use it then maybe you're starting to learn javascript in the wrong place. — iConnor
– iConnor, Commented Dec 1, 2013 at 7:20
I almost got it. Using document.write() I have gotten my two sentences together in the browser, but they are written directly after each other. How do I add an indent between them? (like if I pressed enter, not sure what it's called). — Paze
– Paze, Commented Dec 1, 2013 at 7:22

iConnor · Accepted Answer · 2013-12-01 07:17:11Z

2

Nothing being displayed on the page is normal behaviour seeing as you have not told the browser to do so.

Maybe you want something like this.

document.body.innerHTML = compare(computerChoice, userChoice);

Basically, this set's the HTML of the body to value and removes anything currently in the body, or

var generatedText = compare(computerChoice,userChoice), // 1
    myText = document.createTextNode( generatedText );  // 2
document.body.appendChild( myText );                    // 3

Will on line 1 get the generated value and save it, on line 2 will create a text element on the document and on line 3 it will append the text element/node to the end of the body.

This way nothing is removed from the document.

edited Dec 1, 2013 at 7:17

answered Dec 1, 2013 at 6:51

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Paze Over a year ago

Thank you. I will try these. Could you please explain these properties briefly?

Paze Over a year ago

None of these properties seem to add the text to the webpage itself. I simply copy pasted them and put them at the end of my .js code.

iConnor Over a year ago

@BjarniJóhannsson read up on the properties, they are the most common ways to insert html into the document.

Will Over a year ago

Line // 2 above has the keyword var missing from the beginning, it should say: var myText = document.createTextNode( generatedText ); // 2

Collectives™ on Stack Overflow

How to display text in Javascript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related