Rock, Paper & Scissors and HTML


#1


/*I've tried to include the final 'rock paper scissors' JavaScript code as a external file inside my html code, but that didn't work.
So I copy-pasted it between <script type="text/javascript"></script>.
When I go to the website, I will get the pop up with the question, then you've  the possibility to type your choice, it however, doesn't work.
if you choose ok, or cancel.
You type rock, paper or just nothing.. nothing would happen, how could I get it to display the computer choice and the final result? */
the code:

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

var compare = function(choice1, choice2)
   
    {
        if(choice1 === choice2)
            {
                return "The result is a tie!";
            }
        else if(choice1 === "rock")
            {
                if(choice2 === "sciccors")
                    {
                      return "rock wins";   
                    }
                else
                    {
                        return "paper wins";
                    }
                
            }
           
        else if(choice1 === "paper")
            {
                if(choice2 === "rock")
                    {
                      return "paper wins";   
                    }
                else
                    {
                        return "sciccors wins";
                    }
                
            }
            
        else if(choice1 === "sciccors")
            {
                if(choice2 === "paper")
                    {
                      return "sciccors wins";   
                    }
                else
                    {
                        return "rock wins";
                    }
                
            }
     }
     
     console.log(compare(userChoice,computerChoice));


#2

console.log prints messages to the console, you can open it to view the content (F12 key).

To make it visible on the page you have to create a HTML container with assigned id. And now in JavaScript code, instead of using console.log you can update property innerHTML of this element. Example:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Output test</title>
</head>

<body>
  <div id="output"></div>

  <script>
    // select our element with id output
    var output = document.getElementById('output');

    for (var i = 0; i < 10; i++) {
      // add some content to our element
      output.innerHTML += '<p>' + i + '</p>';
    }
  </script>
</body>

</html>

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.