JavaScript按钮事件处理程序不工作_Javascript_Jquery

JavaScript按钮事件处理程序不工作

javascript jquery

JavaScript按钮事件处理程序不工作,javascript,jquery,Javascript,Jquery,我正在学习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&

我正在学习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>

您应该将此代码：

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

在

$（document）.ready（function（）{}）

函数的内部<代码>$（“#单击”）尚未在DOM中

您应该将其包装在

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

这里有一个代码笔链接

您在这里有几个问题：

问题#1:

DOM中尚不存在要绑定到的元素，因此请执行以下任一或所有操作：

将

脚本

标记移动到页脚，就在关闭

标记之前（通常是最佳做法）

用于绑定到未来元素上的事件

将所有JavaScript放在处理程序中

问题#2:

您不应该在

按钮

内的元素上绑定单击事件处理程序，因为

按钮

消耗事件，并且不会传播到子元素，因此它在符合规范的浏览器中不起作用

有关参考信息，请参见：

内容模型：

语法内容，但不能有交互内容后代

相反，将click事件处理程序绑定到

按钮本身

//变量
var waarde={
金额：2
};
$（文档）.ready（函数（）{
updateValue（）；
});
函数updateValues（）{
document.getElementById（“click”）.innerHTML=waarde.amount；
}
//使用事件委派绑定到button元素。
$（文档）。在（“#按钮”）上。单击（函数（）{
waarde.amount=waarde.amount+1；
updateValue（）；
});

0
两点：
您应该将jQuery事件侦听器放在document.ready中
无法保证在span上执行单击事件

//变量
var waarde={
金额：2
};
$（文档）.ready（函数（）{
updateValue（）；
$（'#click2'）。单击（函数（）{
waarde.amount++；
updateValue（）；
});
});
函数updateValues（）{
document.getElementById（“click2”）.innerHTML=waarde.amount；
}

0
代码的问题是，当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;    
}

您必须在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;
    }

您可以看到您的问题解决方案是
您缺少$（文档）中的按钮单击事件。就绪（function（）{}（；
作为一名JavaScript开发人员，我喜欢这个标题。）您有任何错误吗？不工作是什么意思。请指定。另外，在使用JS时始终检查浏览器控制台。对于初学者，没有使用$（文档）。就绪（
如果您的.click（）
处理程序在外部。请注意，您正在将普通JavaScript与jQuery混合。jQuery是一个扩展或简化JavaScript并使其更易于交叉浏览的库。在jQuery中，您可以按其ID选择元素，如下所示：$（“#我的元素”）
，就像您在$（“#click”）中所做的那样.click（）
。您可以在updateValue
函数中执行相同的操作，即：$（“#click”）.html（waarde.amount）
（在这种情况下，您甚至可以使用特殊关键字this，但如果您刚刚学习，您很快就会遇到这种情况。感谢您的解释和示例。现在我知道如何操作了。
    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;
    }