JavaScript按钮事件处理程序不起作用

Question

我正在学习javascipt，现在我有一段代码，但我无法让它工作，javascript没有被执行。 我已经在网上搜索过但我找不到答案。 也许你们可以帮助我。

HTML

<html>
<head>
    <title>Text Game</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
     <script type="text/javascript" src="javascript.js"></script>
</head>
<body>
        <button><span id="click">0</span></button>
</body>
</html>

使用Javascript

// Variables
var waarde = {
  amount:2
};

$(document).ready(function() {
  updateValues();
});

function updateValues() {
  document.getElementById("click").innerHTML = waarde.amount;
}

$('#click').click(function() {
  waarde.amount = waarde.amount + 1;
  updateValues();
});

Answer 1

你有几个问题：

问题＃1：

DOM中不存在要绑定的元素，所以执行以下任何或所有操作：

在结束</body>标记之前将script标记移动到页脚（通常最佳实践）。
使用事件委派来绑定未来元素上的事件。
将所有JavaScript放在就绪处理程序中。

问题＃2：

您不应该在button内的元素上绑定click事件处理程序，它不会在符合规范的浏览器中工作，因为button会占用事件，而不会传播给子项。

请参阅HTML5规范以获取参考：

内容模型：

短语内容，但必须没有互动内容后代。

而是将click事件处理程序绑定到button本身。

 // Variables var waarde = { amount: 2 }; $(document).ready(function(){ updateValues(); }); function updateValues(){ document.getElementById("click").innerHTML = waarde.amount; } // Binding to the button element using event delegation. $(document).on('#button').click(function(){ waarde.amount = waarde.amount + 1; updateValues(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button"><span id="click">0</span></button>

此外，除非你需要span元素用于其他东西，你可以摆脱它并只使用：

document.getElementById("button").innerHTML = waarde.amount;

Answer 2

你应该把这段代码：

$('#click').click(function(){
  waarde.amount = waarde.amount + 1;
  updateValues();
});

在$(document).ready(function(){})函数里面。 $('#click')不在DOM中..

Answer 3

您必须在document.ready中编写“Click”事件

    var waarde = {
        amount: 2
    };

    $(document).ready(function () {
        $('#click').click(function () {
            waarde.amount = waarde.amount + 1;
            updateValues();

        });
        updateValues();
    });

    function updateValues() {
        document.getElementById("click").innerHTML = waarde.amount;
    }

Answer 4

您的代码的问题是，当javascript加载js文件时，您没有分配事件处理程序。 它应该在ready函数中调用。

var waarde = {    
    amount:2    
};

$(document).ready(function(){    
    $('#click').click(function(){

        waarde.amount = waarde.amount + 1;    
        updateValues();    
    });

});

function updateValues(){    
    document.getElementById("click").innerHTML = waarde.amount;    
}

Answer 5

你应该将它包装在ready方法中！

    // Variables
    var waarde = {
      amount:2
    };

    $(document).ready(function() {

      $('#click').click(function() {
        waarde.amount = waarde.amount + 1;
        updateValues();
      });
    });

   function updateValues() {
     document.getElementById("click").innerHTML = waarde.amount;
   }

这是一个codepen链接http://codepen.io/anon/pen/vKXQza

Answer 6

两点：

你应该把你的jQuery事件监听器放在document.ready中。

无法保证在span上运行click事件。

 // Variables var waarde = { amount:2 }; $(document).ready(function(){ updateValues(); $('#click2').click(function(){ waarde.amount++; updateValues(); }); }); function updateValues(){ document.getElementById("click2").innerHTML = waarde.amount; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <button id="click2">0</button>

Answer 7

您可以在此处查看问题解决方案

您缺少$(document).ready(function(){}(;按钮单击事件$(document).ready(function(){}(;

JavaScript按钮事件处理程序不起作用

问题描述

7 个解决方案

解决方案1
3 已采纳 2016-06-20 16:50:42

解决方案2
2 2016-06-20 16:45:20

解决方案3
2 2016-06-20 16:59:13

解决方案4
1 2016-06-20 16:52:56

解决方案5
0 2016-06-20 16:49:03

解决方案6
0 2016-06-20 16:51:11

解决方案7
0 2016-06-20 17:40:59

JavaScript按钮事件处理程序不起作用

问题描述

7 个解决方案

解决方案1 3 已采纳 2016-06-20 16:50:42

解决方案2 2 2016-06-20 16:45:20

解决方案3 2 2016-06-20 16:59:13

解决方案4 1 2016-06-20 16:52:56

解决方案5 0 2016-06-20 16:49:03

解决方案6 0 2016-06-20 16:51:11

解决方案7 0 2016-06-20 17:40:59

解决方案1
3 已采纳 2016-06-20 16:50:42

解决方案2
2 2016-06-20 16:45:20

解决方案3
2 2016-06-20 16:59:13

解决方案4
1 2016-06-20 16:52:56

解决方案5
0 2016-06-20 16:49:03

解决方案6
0 2016-06-20 16:51:11

解决方案7
0 2016-06-20 17:40:59