JavaScript 按钮 onclick 不起作用

Question

<button onclick="hello()">Hello</button>

<script>
  function hello() {
    alert('Hello');
  }
</script>

这是我的代码。但这不起作用。当我点击按钮时没有任何反应。

Answer 1

请注意遇到此问题的其他开发人员，如果您使用保留的方法名称，例如，您可能会遇到此问题。

clear

。

<!DOCTYPE html>
<html>
<body>
  <button onclick="clear()">Clear</button>
  <button onclick="clear2()">Clear2</button>
  <script>
  function clear() {
    alert('clear');
  }
  function clear2() {
    alert('clear2');
  }
  </script>
</body>
</html>

Answer 2

这个怎么样？

<button id="hellobutton">Hello</button>
<script>
function hello() {
alert('Hello');
}
document.getElementById("hellobutton").addEventListener("click", hello);
</script>

附注您应该将 hello() 放在按钮上方。

Answer 3

我自己也遇到了这个问题，所以我可以确认有些地方不对劲。不同之处在于我在运行时生成 DOm 元素。如果您在代码中找不到

onclick

的位置，则将

onmousedown

替换为

addEventListener

似乎可以解决问题。

Answer 4

我遇到了同样的问题，那是因为保留的方法名称。我们只是更改函数名称。

function click() {
    alert('hi')
    
}

function click1234() {
    alert('hi')
    
}

<body>
<button onclick="click()">login</button>

<button onclick="click1234()">login1234</button>
</body>

Answer 5

我也有类似的问题。我有

child.js

和

common.js

文件。就我而言，我的 HTML 文件同时使用了 JS 文件，并且它们都有一个同名的函数，

child.js

function hello(){}

还有

common.js

function hello(){}

删除其中之一后，我的代码工作正常，并且 onclick 开始工作。希望这有帮助！

Answer 6

添加：

type="button"

到按钮元素。默认类型是“提交”，即在脚本运行之前提交表单。

Answer 7

对于其他具有更高级代码的开发人员，有时绝对位置元素会阻挡按钮。确保没有元素阻止单击按钮。

Answer 8

我遇到了同样的问题，对我来说，它不起作用，因为我的 main.js 有 type="module"，如果你不需要 type="module" 这将起作用。

<body>
    <button onclick="onBtSave()">Save filter model script type module</button>
    <button onclick="onBtRestore()">Restore filter model no script type</button>
    
    <script type="module">
      // broken 
      function onBtSave() {
        console.log("saving current filter model");
      }
    </script>
    <script >
      // working 
      function onBtRestore() {
        console.log("restoring current filter model");
      }
    </script>

Answer 9

使用 onclick 与 EventListeners。

问题是浏览器兼容性和必要性的问题。您是否需要将多个事件附加到一个元素？未来你会吗？很有可能，你会的。 AttachEvent 和 addEventListener 是必需的。如果没有，内联事件可能看起来可以解决问题，但你最好为未来做好准备，虽然这看起来不太可能，但至少是可以预测的。您有可能必须转向基于 JS 的事件侦听器，因此您不妨从那里开始。不要使用内联事件。

jQuery 和其他 javascript 框架在通用模型中封装了 DOM 2 级事件的不同浏览器实现，因此您可以编写跨浏览器兼容的代码，而不必担心 IE 的反叛历史。与 jQuery 相同的代码，所有跨浏览器并准备好摇滚：

$(element).on('click', function () { /* do stuff */ });

不过，不要仅仅为了这一件事就跑去获取一个框架。您可以轻松地推出自己的小实用程序来处理旧版浏览器：

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// 示例～``` 添加事件（ document.getElementById('myElement'), '点击'，函数（）{警报（'嗨！'）; } );

Try it: http://jsfiddle.net/bmArj/

Taking all of that into consideration, unless the script you're looking at took the browser differences into account some other way (in code not shown in your question), the part using addEventListener would not work in IE versions less than 9.

Answer 10

您的代码没有问题..运行此代码片段

function hello() {
alert('Hello');
}

<button onclick="hello();">Hello</button>

如果您想在窗口加载时发出警报。像这样改变你的代码

(function(){
  alert('hello')
})();

Answer 11

在我的例子中，有两个相同的元素带有

position: absolute

。我在第一个元素上设置了

onclick

，所以它没有被调用，因为第二个元素覆盖了它

Answer 12

当我在 Visual Studio Code 中打开另一个文件夹时，发生了这种情况。我刚刚打开了 Visual Studio Code 的新窗口，这次只打开了一个文件夹，现在它可以工作了

Answer 13

当我有一个 id 与 JavaScript 函数名称完全匹配的按钮时，我遇到了同样的问题。更改其中之一以使 id 和函数名称不匹配后，它就起作用了。

Answer 14

对于那些可能像我一样愚蠢的人，请确保您没有对代码进行备份，并在新代码中添加按钮时在浏览器中保持备份打开。

Answer 15

由于 HTML 脚本标记中的

type="module"

，我也遇到了类似的问题。使用

export

关键字导出所需的函数使得该函数可以在 HTML 中导入。

Answer 16

像这样在 hello 函数后面写一个分号

<button onclick="hello();">Hello</button>

JavaScript 按钮 onclick 不起作用

问题描述投票：0回答：16

16个回答

最新问题

JavaScript 按钮 onclick 不起作用

问题描述 投票：0回答：16

16个回答

最新问题

问题描述投票：0回答：16