Question

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

Answer 1

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

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

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

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

它会起作用

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

$("img").click(function(){
  alert("Hello");
});

Answer 2

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

DEMO

function doSomething() {
  alert('Hello!'); 
}

Answer 3

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

Answer 4

JsFiddle为您做的是为您创建<HTML>，<head>和<body>标记。您不应该将它们包含在HTML中，因为这会在JsFiddle处理后使标记无效。它还将JS包装在文档的onload事件中。所以你的函数没有像你想象的那样在根范围中定义，但是在document.onload函数的范围内，你无法从体内到达它，因为那是在函数之外。我将JsFiddle属性'wrap in'更改为'no wrap（head）'并且它有效。

Answer 5

您的功能dosomeThing()未在页面中定义只需用此标题替换标题标记

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

然后再试一次

Answer 6

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

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

为什么不调用javascript onclick函数？

6 个答案: