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处理程序中添加所有脚本，使其在范围内是本地的，因此当你的内联{{ 1}}处理程序试图在全局范围内查找它不会在那里找到它的方法。一个简单的解决方法是在下拉列表中选择onclick - 它不会将内容包装在另一个函数中，使其成为全局范围。

演示：Fiddle

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

Answer 2

不要使用onclick事件属性。它们已经过时且丑陋，更不用说片状了。正如您使用jQuery一样，使用它来绑定您的事件：

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

Updated fiddle

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

Fiddle Demo

以下代码可以正常运行..

<强> JQUERY

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

Onclick功能不起作用

4 个答案: