从按钮运行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

您的函数 compare 返回一个字符串，因此，从 onclick 调用它不会导致任何事情发生，您还没有指定要对函数的返回做什么

您可以将它们替换为

，而不是该函数中的所有“返回”

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