从按钮运行js功能并显示

时间:2015-07-26 09:06:45

标签: javascript html function innerhtml

我创建了一个名为“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>
感谢您阅读

1 个答案:

答案 0 :(得分:2)

你的函数比较返回一个字符串,因此,从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"/>