运行来自按钮和显示的js函数

Question

我创建了一个名为 "compare" 的函数，并希望通过 ID 为 "start"

的按钮运行它

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

但是当它被按下时功能没有加载，我也试图在这个

中显示它

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

但问题是它在页面加载时启动

<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>

感谢阅读

Answer 1

你的函数比较 returns 一个字符串，所以，从 onclick 调用它不会导致任何事情发生，你没有指定你想用函数的 return 做什么

而不是该函数中的所有 "returns"，您可以将它们替换为

document.getElementById("score").innerHTML =

更好的方法是

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();
};

甚至

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

（根据评论问题编辑的代码）

在这两种情况下，您都可以将按钮更改为

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

运行来自按钮和显示的js函数

Running js function from button and displaying

html

javascript

function

innerhtml

运行 来自按钮和显示的js函数

Running js function from button and displaying

html

javascript

function

innerhtml

运行来自按钮和显示的js函数