jquery - Onclick 功能不起作用

Question

我尝试创建这个脚本，当我调用函数 oncall 时它可以工作，但是当我创建一个按钮并使用 onclick 函数时，脚本不会运行。

var i = 0;

function increase() {

    var amount = parseInt($('.amount').text());

    i = amount;
    var random = Math.floor(Math.random() * amount);
    var counter = window.setInterval(function () {
        if (i == amount + random) {
            window.clearInterval(counter);
        }
        document.getElementById('result').innerHTML = i++;
    }, 10);
}

http://jsfiddle.net/7MLK5/2/

Answer 1

你的increase函数不在全局范围内，把它放在全局范围内就可以了。

在 fiddler LHS 面板中，onload默认选择第二个下拉菜单，这将使 fiddler 在onload处理程序中添加所有脚本，使它们在范围内成​​为本地，因此当您的内联onclick处理程序尝试在全局范围内查找方法时它不会找到它在那里。一个简单的解决方法是No Wrap - In Body/Head在下拉列表中选择 - 它不会将内容包装在另一个函数中，使它们处于全局范围内。

演示：小提琴

此外，由于您使用的是 jQuery，我更愿意使用 jQuery 添加事件处理程序，而不是使用内联脚本

Answer 2

不要使用onclick事件属性。它们既过时又丑陋，更不用说片状了。无论如何，当您使用 jQuery 时，请使用它来绑定您的事件：

$('.button').click(increase);

更新的小提琴

Answer 3

那是因为 JSFiddle 将您的代码放在一个名为 window.load 的函数中。因此，您将看不到您在 javascript 面板中创建的函数，因为它们是封装的。

在这里，我更新了您的代码并将函数移到了 js 面板之外

http://jsfiddle.net/7MLK5/2/

<div class="button" onclick="increase();">Increase</div>
<p id="result" class="amount">50</p>
<script type="text/javascript">

    var i = 0;
function increase() {
    var amount = parseInt($('.amount').text());
    i = amount;
    var random = Math.floor(Math.random() * amount);
    var counter = window.setInterval(function () {
        if (i == amount + random) {
            window.clearInterval(counter);
        }
        document.getElementById('result').innerHTML = i++;
    }, 10);
}

</script>

Answer 4

小提琴演示

下面的代码将工作..

查询

var i = 0;
$(document).ready(function(){
    $(".button").click(function(){
    increase();
    });
});
function increase() {
    var amount = parseInt($('.amount').text());
    i = amount;
    var random = Math.floor(Math.random() * amount);
    var counter = window.setInterval(function () {
        if (i == amount + random) {
            window.clearInterval(counter);
        }
        document.getElementById('result').innerHTML = i++;
    }, 10);
}

HTML

<div class="button">Increase</div>
<p id="result" class="amount">50</p>

CSS

.button {
    width: 94px;
    height: 44px;
    float: left;
    margin-left: 25px;
    margin-right: 25px;
    text-align: center;
    line-height: 44px;
    color: whitesmoke;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.button:first-child {
    background-color: #3498db;
    border: 3px solid #2980b9;
}