Question

所以我在main.html页面上有一个按钮，单击该按钮时，我希望它从main.js文件中调用defineWinner函数，根据得分来确定简单棋盘游戏的赢家。按钮无效！

基本上，我尝试做的事情如下：

<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 有什么建议吗？

Answer 1

我已经调查了您的代码，decideWinner确实被调用了，问题出在这里：

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

document.getElementById('userScoreDiv').innerHTML是一个字符串，在您的情况下，它可以是"User Score: 0"。假设玩家的得分是10：9。在这种情况下，您将比较"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 with working code

原始答案：

您调用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>
 
如果它仍然不适合您，则您可能尚未加载脚本正确或脚本无法编译。

Answer 2

如果您想要某个元素的事件侦听器，请执行以下操作。

<button id="btn1">Click to Fire Below Event</button>

var el = document.getElementById( 'btn1' );

el.addEventListener("click", function(){
    //Your Code Goes Here
});

Answer 3

您要调用的函数的名称与您要调用的函数的名称不同。

如何正确使用Javascript onclick函数？

3 个答案: