JavaScript按钮的onclick事件无法工作

Question

JavaScript按钮的onclick事件无法工作

19

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

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

这是我的代码，但它并没有起作用。当我点击按钮时，什么都没有发生。

- Martin W

请查看控制台中的错误信息，因为您的代码本身没有问题。 - santosh gore

这里正常运行。 - Vilas Kumkar

3

您的代码没有展示您所描述的问题。 - Quentin

@levi — “如果你有更好的答案，请分享” — 这个问题无法回答。问题中的代码是有效的。 - Quentin

@Quentin — “添加事件监听器通常是，加载脚本则不是”。JavaScript 不仅由事件监听器组成，还包括变量声明、UI 逻辑等等... 你应该深入了解它。 - user4602228

显示剩余11条评论

15个回答

19

这个怎么样？

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

顺便说一句，你应该把hello()放在按钮上面。

- Kangjun Heo

11

我自己也遇到了这个问题，可以确定某些地方不对。区别在于我是在运行时生成DOm元素的。如果您找不到一个地方来添加addEventListener，则将onclick替换为onmousedown似乎可以解决问题。

- Edward

这个救了我的一天。 - Jaskaran Singh

1

对我来说没有任何区别... - Dennis Hackethal

3

我曾经遇到过同样的问题，那是因为使用了保留的方法名称。我们只需要更改函数名称即可。

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

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

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

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

- mojtaba

我犯了同样的错误。 - Ranjithkumar

2

对于其他有更高级代码的开发人员，有时绝对定位元素会阻挡按钮。确保没有任何元素阻挡了按钮的点击。

- LordDeath

2

我有一个类似的问题。我有一个child.js和一个common.js文件。在我的情况下，我的HTML文件同时使用了这两个JS文件，并且它们都有一个同名函数。

child.js

function hello(){}

同时还有

common.js

function hello(){}

我移除其中一个后，我的代码可以正常工作，并且onclick事件也开始起作用了。希望这可以帮到你！

- tk_

2

添加：

type="button"

给按钮元素添加type属性。默认类型是“submit”，这会在脚本运行之前提交表单。

- Sean

1

我有同样的问题，对我来说，它没有起作用是因为我的 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>

- Mara Tata San

1

使用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);
}

// 例子 ~``` addEvent( document.getElementById('myElement'), 'click', function () { alert('嗨！'); } );

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.

- Adhin Neupane

0

There is no problem with your code.. run this snippet

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

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

如果你想在窗口加载时触发这个事件，请将你的代码更改为以下方式

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

- Jishnu V S

它不会改变任何事情。 - kind user

5

无法重现问题并不能回答这个问题。 - Quentin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael · Accepted Answer

提醒其他开发人员，如果您使用保留的方法名称（例如 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>