logo标签列表

在JSFiddle中，JavaScript的onclick事件不起作用

javascripthtmlonclickjsfiddle
15

我正在尝试在jsfiddle上编写代码，但我的onclick事件没有起作用。请问我的代码哪里有问题？

<input value="press" type="button" onclick="myclick()">


function myclick(){
   alert("myclick")
}

编辑

我尝试了No wrap - In head，并且再次尝试使用document.ready，但在jsfiddle中仍无效。

http://jsfiddle.net/hiteshbhilai2010/gs6rehnx/11/

ERROR - Uncaught ReferenceError: myclick is not defined

http://jsfiddle.net/hiteshbhilai2010/33wLs160/6/

我已经查看了一个已有的问题这里，但当我在 jsfiddle 中尝试时，我的问题仍然存在。

请问是否可以有人帮助我 ...谢谢

1
在左侧的选项中，选择“不换行 - 在<head>/<body>中”。http://jsfiddle.net/33wLs160/ - Josh Crozier
你可以省略 $(document).ready(...) 包装器 http://jsfiddle.net/Ldoumrhz/ - Josh Crozier
如果我想保留 $(document).ready(...)，我该如何使用它？ - Hitesh
1
@hitesh - 你为什么要保留那个？它用于在DOM准备就绪时运行代码。你没有理由想要在定义该函数之前等待DOM准备就绪！ - Quentin
那么你的意思是在 jsfiddle 中不需要使用 $(document).ready(...) 吗？ - Hitesh
显示剩余3条评论
5个回答
12
你需要选择无库（纯 JS）和无包装-在 head 中。然后它将作为一个简单的 HTML 页面与 JavaScript 一起工作。
这将被插入到<head>中的一个<script>元素中：
function myclick(){
  alert("myclick")
}

请查看演示

但它需要两者，即无换行和无库才能工作。即使在正文中没有换行也足够了。重要的是没有库（纯JS）。 - dreyescat
我并不是说 jQuery 会阻止它的工作，但也不是必需的。 - dreyescat
这正是你所说的。引用：“但它需要同时关闭换行和不加载jQuery库才能工作”。不加载库意味着不加载jQuery。 - Quentin
你是对的。我误解了你的第一条评论。我把“我尝试了No wrap - In head，然后用document.ready再次尝试，但在jsfiddle中它不起作用”解释为OP也在使用$(document).ready。 - dreyescat
4

正如其他人所说，对于第一个情况，您需要将 No wrap - in <head> 或者 No wrap - in <body> 设置为javascript面板设置（js面板右上方的蓝色链接）。

对于第二个问题（您的编辑），您的代码必须放在一个函数内，并且js将运行它（在新的上下文中），但是它实际上什么都不会做，因为您只定义了一个函数并忽略了任何调用或分配。

如果您调用alert(myclick)，您将看到所有代码都被执行并在那一点上定义。请参见这个fiddle。

$(document).ready(function() {

  //alert("ready is executed");

  function myclick(){
    alert("myclick is called")
    window.location.reload(true);
  }

  alert(myclick); //this will show the myclick is a defined function!

  //document.getElementsByTagName("input")[0].onclick = myclick;
})

如果您调用以下内容：
document.getElementsByTagName("input")[0].onclick = myclick;

在 $(document).ready({...}) 作用域中，它将被分配给按钮并按您的意愿工作。
1
在脚本面板的“加载类型”中选择“无包装-底部”，这是Jsfiddle（截至2019年12月17日）的解决方案。

Image

0
我想在HTML中添加onclick。 - Hitesh
1
@hitesh — 为什么这样说？现在是2014年，不是1998年。 - Quentin
只是想知道为什么会发生这种情况...谢谢回答。 - Hitesh
0

这个是有效的。只需将其从文档准备事件中删除即可。此外，在JavaScript中分号是可选的，但我建议使用它们。

function myclick() {
    alert("myclick");
    window.location.reload(true);
}
<input value="press" type="button" onclick="myclick();">
<script>
    alert("home");
</script>

这里是fiddle。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接