Button.onclick会自动触发,然后不会再次触发

时间:2015-01-28 21:45:14

标签: javascript html button onclick event-handling

我有一个脚本,我用它来尝试一次只显示一个网页的一个部分。

function showMe(id){ clearPage(); changeDisplay(id, "block"); console.log(id)}

目前,我使用按钮更改显示的部分。

var aBtn = document.getElementById("a-btn");
var otherBtn = document.getElementById("other-btn");
aBtn.onclick=showMe("a-btn-section-id");
otherBtn.onclick=showMe("other-btn-section-id");

但是,当我加载页面时,会发生以下情况:

  1. 我看到附加到每个按钮的功能在控制台中按顺序激活一次。
  2. 页面拒绝响应其他按钮输入。
  3. 使用控制台进行测试表明,showMe()及其调用的函数仍可正常工作。我确定我犯了一个非常基本的,初学者的错误(希望这就是为什么当我谷歌/搜索StackOverflow /读取事件处理文档时我无法找到这个问题),但是我&# 39;因为那个错误而感到茫然。为什么我的脚本会假设我的按钮被点击加载,为什么不让它再次点击它们?

1 个答案:

答案 0 :(得分:0)

您正在调用函数并将值赋给onclick属性而不是附加函数,请尝试将onclick属性定义为:

aBtn.onclick=function(){showMe("a-btn-section-id");};
otherBtn.onclick=function(){showMe("other-btn-section-id");};

尝试以下jsfiddle:

function showMe(id){ // some stuff..
  console.log(id)
}

var aBtn = document.getElementById("a-btn");
var otherBtn = document.getElementById("other-btn");
aBtn.onclick=function(){showMe("a-btn-section-id");};
otherBtn.onclick=function(){showMe("other-btn-section-id");};
<input type="button" value="a-btn" id="a-btn"/>
<input type="button" value="other-btn" id="other-btn"/>

希望这有帮助,