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

我正在学习javascipt，现在我有一段代码，但我无法获得此工作，JavaScript未执行。我已经在网上搜索，但我找不到答案。也许你们可以帮助我。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(); 
});

来源

2016-06-20 Stixs

+11

作为一位JavaScript开发人员，我喜欢这个标题。 :) – Veera

你有任何错误？ – Cristy

你是什么意思不工作。请明确说明。另外，在使用JS时总是检查你的浏览器控制台。对于初学者来说，没有'$（document）.ready（''如果你的'.click（）'处理程序在外面。' –

你有几个问题在这里：

问题＃1：

元素不会在DOM存在绑定到尚未，所以做任何或所有以下内容：

将script标签移至页脚，即关闭</body>标签之前（无论如何都是最佳做法）。
使用event delegation绑定未来元素上的事件。
将所有JavaScript放在ready处理程序中。

问题2：

你应该不是button中的元素上的click事件处理程序绑定，它不会在规范兼容的浏览器工作为button消耗的情况下，它不会传播给孩子们。

参考见HTML5 spec for button：

内容模型：

段落式内容，但必须有没有交互式内容后裔。

而是将点击事件处理程序绑定到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;

来源

2016-06-20 16:50:42

谢谢你的解释和例子，现在我知道该怎么做了。 – Stixs

你应该把这个代码：

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

内$(document).ready(function(){})功能。 $('#click')尚未在DOM中。

来源

2016-06-20 16:45:20 aprok

您应该将其包装在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

来源

2016-06-20 16:49:03 akinjide

两点：

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

无法保证在跨度上工作点击事件。

// 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>

来源

2016-06-20 16:51:11 Mojtaba

与您的代码的问题是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;  
}

来源

2016-06-20 16:52:56 sam

你必须写 “Click” 事件中的document.ready

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

来源

2016-06-20 16:59:13 Ram

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

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

来源

2016-06-20 17:40:59 Developer

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

回答

相关问题