时间戳

首页 > 解决方案 > 如何正确使用 Javascript onclick 函数？

javascript - 如何正确使用 Javascript onclick 函数？

问题描述

因此，我的 main.html 页面上有一个按钮，单击该按钮时，我希望它从我的 main.js 文件中调用一个确定Winner 函数，以根据得分确定简单棋盘游戏的获胜者。但是当运行该按钮时没有影响！

基本上我试图做的看起来如下：

<div id="userControls">
  <button class="button End Game" onclick="decideWinner();">End Game</button>
</div>

然后要调用的相应函数如下所示：

function decideWinner(){

  if (document.getElementById('userScoreDiv').innerHTML > document.getElementById('enemyScoreDiv').innerHTML
  && document.getElementById('userScoreDiv').innerHTML >= 10
){
    alert("You Win!");
  }


  else if (document.getElementById('enemyScoreDiv').innerHTML > document.getElementById('userScoreDiv').innerHTML
  && document.getElementById('enemyScoreDiv').innerHTML >= 10
){
    alert("You Lose!");
  }

  else if (document.getElementById('enemyScoreDiv').innerHTML === document.getElementById('userScoreDiv').innerHTML
  && document.getElementById('enemyScoreDiv').innerHTML >= 10 && document.getElementById('userScoreDiv').innerHTML >= 10
){
    alert("Draw!");
  }
}

我已经尝试了一些在网上找到的“修复”来尝试解决这个问题，例如大写 onClick、在函数调用中添加分号等，但按钮仍然没有效果。

完整代码：https ://codepen.io/Qwerty1571/pen/QPYqoY 有什么建议吗？

标签： javascript

解决方案

我查看了您的代码并decideWinner确实被调用了，问题出在此处：

if(document.getElementById('userScoreDiv').innerHTML > document.getElementById('enemyScoreDiv').innerHTML)

document.getElementById('userScoreDiv').innerHTML是一个字符串，在你的情况下它可以是"User Score: 0". 假设玩家的比分是 10:9。在这种情况下，您将比较 if "User Score: 10" > "Robot Score: 9"。这显然行不通。而是将其用作您的decideWinner功能：

function decideWinner() {
    //score and roboScore are global variables in his/her code
    if (score > roboScore && score >= 10) {
        alert("You Win!");
    } else if (roboScore > score && score >= 10) {
        alert("You Lose!");
    } else if (roboScore === score && roboScore >= 10 && score >= 10) {
        alert("Draw!");
    } else {
      //If playerScore < 10 and robotScore < 10 then this gets called
      console.log("No winner yet!")
    }
}

带有工作代码的 Codepen

原始答案：

你打电话determineWinner，但你的功能被调用decideWinner。

这应该有效：

<div id="userControls">
   <button class="button End Game" onclick="decideWinner()">End Game</button>
</div> 


 
 function decideWinner() {
   console.log("The winner is me")
 }
 
 
 <div id="userControls">
   <button class="button End Game" onclick="decideWinner()">End Game</button>
 </div>

如果它仍然对您不起作用，那么您可能没有正确加载脚本或者您的脚本无法编译。

推荐阅读