0

我创建了一个JSFiddle来描述这个问题。doSomething()为什么我调用该函数时没有显示警报？

4

6 回答 6

5

这是因为doSomething()函数没有在 HTML 页面中定义。在 jsfiddle 中，您的函数（在 js 窗格中）由 jquery 的文档 onload 事件包装。（有关设置，请参见 jsfiddle 的左侧）。所以它是这样执行的，

$(document).ready(function() {
    function doSomething() {
      alert('Hello!'); 
    }
});

看看它是如何包装的。它无法访问。要修复它，您应该将其分配给window对象。在 js 窗格中将函数写为

window.doSomething=function() {
  alert('Hello!'); 
}

它会工作

建议您不要使用onclickHTML 元素的属性。最好用 JS 分配事件处理程序。

$("img").click(function(){
  alert("Hello");
});
于 2013-01-11T07:39:24.210 回答
5

您需要禁用 jsfiddle 中的框架选项才能使 javascript 工作

演示

function doSomething() {
  alert('Hello!'); 
}
于 2013-01-11T07:39:30.977 回答
4

这是一个“小提琴”。从“选择nowrap (head)框架”字段中的第一个选项中选择。

于 2013-01-11T07:40:48.190 回答
3

JsFiddle 为您做的是为您创建<HTML>,<head>和<body>标签。您不应该将它们包含在您的 HTML 中，因为这会使标记在 JsFiddle 处理后无效。它还将您的 JS 包装在文档的 onload 事件中。因此，您的函数没有像您想象的那样在根范围内定义，而是在document.onload函数的范围内定义，您无法从主体内部访问它，因为那是该函数之外的。我将 JsFiddle 属性 'wrap in' 更改为 'no wrap (head)' 并且它起作用了。

于 2013-01-11T07:45:02.590 回答
1

您的功能dosomeThing()未在页面中定义，只需用这个替换标题标签

 <head>
    <script>
      function doSomething() {
  alert('Hello!'); 
}
    </script>
  </head>

然后再试一次

于 2013-01-11T07:37:31.947 回答
0

这是您的完整代码。只需复制并粘贴您的编辑器。这是

<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Javascript Events</title>
<script type='text/javascript'>
window.onload = function() {
    var image_one = document.getElementById('imageOne');
    var image_two = document.getElementById('imageTwo');

    image_one.onclick = function() {
        alert('Hello!');
    }


    image_two.onclick = function() {
        alert('Hello!');
    }


}
</script>
</head>
<body>
    <img id="imageOne" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG" />
    <img id="imageTwo" src="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png" /> 
</body>
</html>
于 2013-01-11T08:05:47.053 回答