时间戳

首页 > 解决方案 > 在PHP中的按钮上调用JS函数

javascript - 在PHP中的按钮上调用JS函数

问题描述

我正在创建一个游戏，用户可以在其中选择是想与朋友玩还是与电脑玩

在我的 PHP 文件中，我创建了两个这样的按钮

<button id = "begin-game" onClick = "location.href='./g.php'" type = "button">START</button>
<button id = "begin-computer-game">Againts Ai</button>

第一个按钮按预期工作，但第二个按钮没有。我如何调用此方法，以便当用户单击“反对 Ai”按钮时，它会执行以下代码

这是我来自 js 文件的代码

const game = new Game();
document.getElementById('begin-game').addEventListener('click', function() {
  game.startGame();
  document.getElementById('begin-computer-game').style.display = 'none';
  this.style.display = 'none';
  document.getElementById('play-area').style.opacity = '1';
});
document.getElementById('begin-computer-game').addEventListener('click', function() {
  game.startComputerGame();
  this.style.display = 'none';
  document.getElementById('begin-game').style.display = 'none';
  document.getElementById('play-area').style.opacity = '1';
});
document.addEventListener('keydown', function(event) {
  game.handleKeydown(event);
});

现在我在控制台中收到此错误

标签： javascriptphp

解决方案

您可以使用onclick

  1. addEventListener 不会覆盖元素上现有的事件处理程序，而 onclick 会覆盖任何现有的 onclick = function 事件处理程序。

  2. addEventListener 不适用于旧版本的 Internet Explorer ( > IE 9 )，它使用 attachEvent ( < IE 9 )，而 onclick 适用于所有浏览器。

<button id ="begin-computer-game" onclick ="functionA();">Againts Ai</button>

你的功能

functionA(){
   game.startComputerGame();
   this.style.display = 'none';
   document.getElementById('begin-game').style.display = 'none';
   document.getElementById('play-area').style.opacity = '1';
}

推荐阅读