Running js function from button and displaying

Question

I have made a function called "compare" and want to run it from a button with the id "start"

<input type="button" id="start" onClick="compare(userChoice, computerChoice)" value="Start">

but when it's pressed the function does not load, also I tried to display it in this

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

but the problem with it is that it starts as the page loads

<script>

        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";
}

var compare = function(choice1, choice2){
  if(choice1 === choice2){
   return "The result is a tie!"
  }
  else if(choice1 === "rock"){
   if(choice2 === "scissors"){
    return "rock wins";
   }
   else{
    return "paper wins"
   }
  }
  
  
  else if(choice1 === "paper"){
   if(choice2 === "rock"){
    return "paper wins";
   }
   else{
    return "scissors wins"
   }
  }
  
  
  
  
  
   else if(choice1 === "scissors"){
   if(choice2 === "paper"){
    return "scissors wins";
   }
   else{
    return "rock wins"
   }
  }
  
};
document.getElementById("player").innerHTML = userChoice;
document.getElementById("computer").innerHTML = computerChoice;
document.getElementById("score").innerHTML = compare(userChoice, computerChoice) ;

</script>

Thank you for reading

This has been asked before. stackoverflow.com/search?q=rock

Jonathan
– Jonathan

2015-07-26 09:14:19 +00:00
Commented Jul 26, 2015 at 9:14 — Jonathan
– Jonathan, Commented Jul 26, 2015 at 9:14

Jaromanda X · Accepted Answer · 2015-07-26 10:13:44Z

2

your function compare returns a string, so, calling it from onclick will result in nothing happening, you haven't specified what you want to do with the return of the function

rather than all your "returns" in that function, you could replace them with

document.getElementById("score").innerHTML =

a better way would be something like

var compare = function() {
    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";
    }
    var check = function () {
        if (userChoice === computerChoice) {
            return "The result is a tie!"
        } else if (userChoice === "rock") {
            if (computerChoice === "scissors") {
                return "rock wins";
            } else {
                return "paper wins"
            }
        } else if (userChoice === "paper") {
            if (computerChoice === "rock") {
                return "paper wins";
            } else {
                return "scissors wins"
            }
        } else if (userChoice === "scissors") {
            if (computerChoice === "paper") {
                return "scissors wins";
            } else {
                return "rock wins"
            }
        }
    }
    document.getElementById("score").innerHTML = check();
};

or even

var compare = function() {
    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";
    }
    document.getElementById("score").innerHTML = function () {
        if (userChoice === computerChoice) {
            return "The result is a tie!"
        } else if (userChoice === "rock") {
            if (computerChoice === "scissors") {
                return "rock wins";
            } else {
                return "paper wins"
            }
        } else if (userChoice === "paper") {
            if (computerChoice === "rock") {
                return "paper wins";
            } else {
                return "scissors wins"
            }
        } else if (userChoice === "scissors") {
            if (computerChoice === "paper") {
                return "scissors wins";
            } else {
                return "rock wins"
            }
        }
    }(); // IIEF
};

(code edited based on comment question)

in both cases you can change the button to

<input type="button" id="start" onClick="compare()" value="Start"/>

edited Jul 26, 2015 at 10:13

answered Jul 26, 2015 at 9:15

Jaromanda X

1

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

10 Comments

Ben Over a year ago

Thanks for the help, do you know how to start it?

Jaromanda X Over a year ago

"start it" ??? doesn't <input type="button" id="start" onClick="compare(userChoice, computerChoice)" value="Start"> work for you?

Ben Over a year ago

No it doesn't do anything also I changed the code from return to document.getElementById("score").innerHTML =

Ben Over a year ago

is there a way to make the prompt pop up after the button is pressed?

Jaromanda X Over a year ago

yes, but that wasn't in your question - see edited code for an answer to this new question

|

Collectives™ on Stack Overflow

Running js function from button and displaying

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related