设置html按钮以调用javascript函数[关闭]答案

【问题标题】：Setting html button to call javascript function [closed]设置html按钮以调用javascript函数[关闭]
【发布时间】：2015-01-12 11:10:19
【问题描述】：

正如标题所说，我试图让这个按钮调用 js 函数以在乒乓球比赛中暂停，但惨遭失败。

<!DOCTYPE html>
<html>
<body>
<input type="button" id="pause" value="Pause">
</body>

<script>
var isPaused = false;
var ballSpeedx = 0;
var ballSpeedy = 0; 

var pauseGame = function(Ball){ 
  document.getElementById("pause").onclick = function(Ball){
    if(isPaused === true) {
      Ball.x_speed = ballSpeedx;
      Ball.y_speed = ballSpeedy;
      isPaused = false;              

    } else if(isPaused === false){
      ballSpeedx = Ball.x_speed;
      ballSpeedy = Ball.y_speed; 
      Ball.x_speed =0;
      Ball.y_speed =0;
      isPaused = true;
    }
};
</script>

</html>

按照 robg 的建议做了一个小的编辑，没有任何改变。点击按钮不会激活该功能。

【问题讨论】：

你怎么失败了？有什么问题？
它总是暂停？是问题吗？
您调用的是 onclick 属性而不是分配给它，使用类似：document.getElementById("pause").onclick = function(){...}。修复缩进也会显示语法错误。
您能详细说明一下吗？
我正在尝试单击按钮并暂停游戏中球的移动。但是点击按钮被证明是徒劳的。我找不到它的问题

标签： javascript html button call

【解决方案1】：

在调用pauseGame 函数之前，您不会尝试将事件处理程序分配给按钮的单击事件，但您永远不会调用该函数，因此单击按钮将永远不会执行任何操作。

您还没有定义Ball，因此函数内的代码无论如何都会出错。

var isPaused = false;
var ballSpeedx = 0;
var ballSpeedy = 0;

function pauseGame(event) {

  alert("The function runs");
  
  /* Commented out because Ball is not defined
  if (isPaused === true) {
    Ball.x_speed = ballSpeedx;
    Ball.y_speed = ballSpeedy;
    isPaused = false;
  } else if (isPaused === false) {
    ballSpeedx = Ball.x_speed;
    ballSpeedy = Ball.y_speed;
    Ball.x_speed = 0;
    Ball.y_speed = 0;
    isPaused = true;
  }
  */
};

document.getElementById("pause").onclick = pauseGame

&lt;input type="button" id="pause" value="Pause"&gt;

【讨论】：

【解决方案2】：

在您的代码中有：

var pauseGame = function(Ball){

为什么使用函数表达式而不是声明？为什么不：

function pauseGame(ball) {

然后：

  document.getElementById("pause").onclick = function(Ball) {

虽然更安全的策略是：

  var button = document.getElementById("pause");
  if (button) {
    button.onclick = function(Ball) {

然后：

    if (isPaused === true) {

因为 isPaused 是布尔值，你可以这样做：

    if (isPaused) {

      Ball.x_speed = ballSpeedx;
      Ball.y_speed = ballSpeedy;
      isPaused = false;              

    } else if(isPaused === false){

没有必要进行第二次测试。如果 isPaused 不计算为真，它一定是假的，中间没有任何东西，所以只是：

    } else {

      ballSpeedx = Ball.x_speed;
      ballSpeedy = Ball.y_speed; 
      Ball.x_speed =0;
      Ball.y_speed =0;
      isPaused = true;
    }

所以 Ball 是一个对象，但你没有展示它是如何创建的或它的属性是什么，所以我假设它没问题。

然后：

});

函数表达式或声明都不应该这样结束。未调用该函数，因此未将侦听器添加到按钮中。也许你想要：

var isPaused = false;
var bolaSpeedx = 0;
var bolaSpeedy = 0; 

function pauseGame (Ball) { 
  document.getElementById("pause").onclick = function(Ball) {
    if (isPaused) {
      Ball.x_speed = ballSpeedx;
      Ball.y_speed = ballSpeedy;
      isPaused = false;              

    } else {
      ballSpeedx = Ball.x_speed;
      ballSpeedy = Ball.y_speed; 
      Ball.x_speed =0;
      Ball.y_speed =0;
      isPaused = true;
    }
  };
}

现在调用函数将监听器添加到按钮：

pauseGame(...);

【讨论】：

谢谢！不过还不能真正投赞成票。

【解决方案3】：

代替

document.getElementById("pause").onclick = function(Ball){

有

var myPause = function(){
//initialize Ball

并将您的按钮更改为

<input type="button" id="pause" value="Pause" onclick = "myPause()">

最后，您有一些Balls，但我们并没有真正看到您如何初始化您的Balls。确保它们已正确初始化。

【讨论】：

onclick 处理程序需要调用函数：<input ... onclick="myPause()">。 ;-)
@RobG，没错，我已经相应地编辑了我的答案。
在 JS 中使用事件处理程序不是更好的做法吗？
视情况而定。在这种情况下，您必须确保在您的 JS 代码运行时您的按钮已经存在。