CODEWITHSUNDEEP
javascripthtml
Paze
Paze

Reputation: 183

Displaying return as text

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.

Upvotes: 0

Views: 125

Answers (2)

roo2
roo2

Reputation: 6071

Your using console.log() so you should see output in the developer console (press F12 and open console tab).

To put it on the page, you have to create a DOM(html) element and add it to the page.

<SCRIPT SRC="rockpaper.js">
</SCRIPT>
<div id="container"></div>

in your script replace

 console.log(compare(computerChoice,userChoice))

with

 var container = document.getElementById("container");
 container.innerHTML = compare(computerChoice,userChoice);

Happy coding!

Upvotes: 1

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48630

Here is a jsFiddle that logs data to the screen. I noticed your tie logic is flawed. You are cheking a big-ass string to the users simple one-word string. You need to tokenize; extract the state from the computer choice string.

Javascript

// Helpful utility function...
function logResultToScreen(result) {
    var block = document.createElement('div');
    var text = document.createTextNode(result);
    var output = document.getElementById('output');

    block.appendChild(text);
    output.insertBefore(block);
}


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);
logResultToScreen(computerChoice);

var compare = function (choice1, choice2) {
    var tokens = choice1.split(' ');

    if (tokens[2] === 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 === "paper") {
            return ("scissors wins");
        } else {
            return ("rock wins");
        }
    }
}

var output = compare(computerChoice, userChoice);
logResultToScreen(output);
console.log(output);

HTML

<div id="output"><strong>Results:</strong></div>

Upvotes: 1

Related Questions