JavaScript按钮事件处理程序不起作用
[英]JavaScript button event handler not working
问题描述
I am learning javascipt and now i have a piece of code but i am unable to get this to work, javascript isn't executed. 
我正在学习javascipt，现在我有一段代码，但我无法让它工作，javascript没有被执行。 I have already searched the web but i can't find an answer. 我已经在网上搜索过但我找不到答案。 Maybe you guys can help me with this. 也许你们可以帮助我。
HTML 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 使用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();
});
7 个解决方案
解决方案1
3 已采纳 2016-06-20 16:50:42
You have a couple of issues here: 你有几个问题：
Issue #1: 问题＃1：
The element does not exist in the DOM to bind to yet, so do any or all of the following: DOM中不存在要绑定的元素，所以执行以下任何或所有操作：
- Move your
scripttag to the footer, right before the closing</body>tag (generally best practice anyway).在结束</body>标记之前将script标记移动到页脚（通常最佳实践）。 - Use event delegation to bind to events on future elements. 使用事件委派来绑定未来元素上的事件。
- Put all the JavaScript in the ready handler. 将所有JavaScript放在就绪处理程序中。
Issue #2: 问题＃2：
You should not bind a click event handler on an element inside a button , it will not work in specification compliant browsers as the button consumes the event, and it not propagated to children. 您不应该在button内的元素上绑定click事件处理程序，它不会在符合规范的浏览器中工作，因为button会占用事件，而不会传播给子项。
See the HTML5 spec for button for reference: 请参阅HTML5规范以获取参考：
Content model:
Phrasing content, but there must be no interactive content descendant.
Instead, bind the click event handler to the button itself. 而是将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>
Also, unless you need the span element for something else, you could get rid of it and just use: 此外，除非你需要span元素用于其他东西，你可以摆脱它并只使用：
document.getElementById("button").innerHTML = waarde.amount;
解决方案2
2 2016-06-20 16:45:20
You should put this code: 你应该把这段代码：
$('#click').click(function(){
waarde.amount = waarde.amount + 1;
updateValues();
});
Inside of $(document).ready(function(){}) function. 在$(document).ready(function(){})函数里面。 $('#click') isn't in the DOM yet.. $('#click')不在DOM中..
解决方案3
2 2016-06-20 16:59:13
You have to write "Click" event in document.ready 您必须在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;
}
解决方案4
1 2016-06-20 16:52:56
The problem with your code is you are not assigning an event handler when javascript loads the js file. 您的代码的问题是，当javascript加载js文件时，您没有分配事件处理程序。 It should be called in the ready function. 它应该在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;
}
解决方案5
0 2016-06-20 16:49:03
You should wrap it inside the ready method! 你应该将它包装在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;
}
Here's a codepen link http://codepen.io/anon/pen/vKXQza 这是一个codepen链接http://codepen.io/anon/pen/vKXQza
解决方案6
0 2016-06-20 16:51:11
Two points: 两点：
You should put your jQuery event listener inside the document.ready. 你应该把你的jQuery事件监听器放在document.ready中。
There is no guarantee to work click event on span. 无法保证在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>
解决方案7
0 2016-06-20 17:40:59
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.