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中的元素不存在，所以执行以下任何或所有操作：

在结束script标记之前将</body>标记移至页脚（通常最佳做法）。
使用event delegation绑定未来元素上的事件。
将所有JavaScript放入ready处理程序。

问题＃2：

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

请参阅HTML5 spec for button以获取参考：

内容模型：

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

相反，将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文件时，您没有分配事件处理程序。它应该在就绪函数中调用。

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;
   }

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

Answer 6

两点：

您应该将jQuery事件侦听器放在document.ready。

中

无法保证在跨度上处理点击事件。

＆＃13;

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

＆＃13;

%paste

＆＃13;

Answer 7

您可以看到问题解决方案是here

您在$(document).ready(function(){}(;

中缺少按钮点击事件

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

7 个答案: