在按钮上使用onclick属性调用的Javascript函数

javascript function called with an onclick attribute on button

本文关键字：调用 Javascript 函数 属性 onclick 按钮      更新时间：2023-09-26

我不明白为什么这不起作用。我坚持w3schools的参考。下面的代码是:

HTML: 

<button onclick="click()">Test</button>
Javascript: 

function click() {
    alert("Hello !");
}

它不起作用，因为您已经将JSFiddle配置为将JavaScript封装在一个函数中，并将其称为onload。这会阻止你的函数成为一个全局函数，这样它就不在你的内部事件处理程序属性的范围内了。

此外，在您修复之后，内在事件属性的奇怪范围规则(我不知道这些都记录在哪里)意味着click被解析为按钮的click属性，然后搜索范围远到足以找到全局click函数。

最简单的解决方法是:

  • 将函数重命名为不与现有属性名称冲突的名称
    • 从JSFiddle左边的菜单中选择不换行选项

正确的解决方案是将事件处理程序附加到JavaScript中。现在不是20世纪90年代，我们应该避免使用那个时代的技术，因为它无法区分不同的关注点。把JS放在一个地方，HTML放在另一个地方。

<button>Test</button> 
<script>
document.querySelector('button').addEventListener('click', click);
function click(evt) {
    alert("Hello !");
}
</script>

这段代码不起作用，因为已经有一个click原生方法，遮蔽它会阻止正常的单击事件处理。给它另一个名字，它就会起作用。

查看的一个方法是将按钮定义为

<button onclick="console.log(click)">Test</button>

我认为你不能给一个函数名作为click。更改函数名&

click似乎有所保留。尝试重命名该方法:http://jsfiddle.net/qeCE5/1/

function clickMe() {
    alert("Hello !");
}

您需要更改函数名称。'click'可能是一个保留关键字，所以它不会识别当你调用它。将其重命名为其他名称。"democlick()"。另外，不要忘记用'.html保存代码。扩展。如果有什么问题请告诉我。谢谢。

相关文章：