在 btn.onclick = function() 中包含一个参数 [重复]答案

【问题标题】：Including a parameter in btn.onclick = function() [duplicate]在 btn.onclick = function() 中包含一个参数 [重复]
【发布时间】：2019-07-11 12:53:58
【问题描述】：

当我按下按钮时，我正在调用一个函数。当我使用btn.onclick = function() 时，按下按钮并完成功能。如果我将 HTML 更改为包含 onclick=clicked() 并将 javascript 更改为 function clicked()，它不会运行。

我已经尝试了这两种方法，因为我希望能够通过函数传递参数（因为我有很多按钮并且我希望使用尽可能少的代码）。

window.onload = function () {
  var modal = document.getElementById('myModal');
  var btn = document.getElementById("Q11");
  var span = document.getElementsByClassName("close")[0];
  btn.onclick = function () {
    modal.style.display = "block";
  }
  span.onclick = function (){
    modal.style.display ="none";
  }
  window.onclick = function(event) {
    if (event.target==modal) {
      modal.style.display="none"
    }
  }
}

如何在可以通过btn.onclick 函数传递参数的位置获取它，以便任何按钮都可以调用该函数但通过它传递不同的参数？ onclick="function(a)" 除了事件处理程序/侦听器之外，是否有等价物？

感谢任何帮助。

【问题讨论】：

.onclick = () => someFn('someParam')

标签： javascript

【解决方案1】：

可以在内联函数调用中的onclick调用中传递参数

var btn = document.getElementById("Q11");
//var modal = document.getElementById('myModal');
//window.onload = function () {
  //var span = document.getElementsByClassName("close")[0];
 // span.onclick = function (){
  //  modal.style.display ="none";
  //}}
  function a(e)
  {
    //modal.style.display = "block";
    console.log(e)
  }
  
  //window.onclick = function(event) {
   // if (event.target==modal) {
    //  modal.style.display="none"
   // }
  //}

<button  onClick="a('apple')">Button</button>
<button  onClick="a('ball')">Button</button>
<button  onClick="a('cat')">Button</button>
<br>This button will send its own id if required it can be used in the function
<button id="buttonid" onClick="a(this.getAttribute('id'))">Button</button>

【讨论】：

如何使用具有不同 ID 的按钮进行这项工作？
其实对于这种情况 id 无关紧要，对于不同的按钮，你可以在同一个函数上传递不同的参数，它就会执行。每个按钮都有不同的参数，这些参数将被发送到函数中。检查编辑
这个功能很好用。但是，当function a() 在window.onload = function() 之外时，function a() 有效，但span.onclick 无效。在window.onload 内时，我收到错误a is not defined。有什么想法吗？
保持一切不变，把var modal = document.getElementById('myModal'); var btn = document.getElementById("Q11"); var span = document.getElementsByClassName("close")[0];放在全局而不是window.onload函数中

【解决方案2】：

您将onclick 设置为一个包装函数，并在其中调用带有参数的真实函数

function clickFunc(parameter){
  console.log(parameter)
}
window.onload = function () {
  var btn = document.getElementById("Q11"); 
  btn.onclick = (e) => {
    clickFunc("Parameter");
  }
}

&lt;button id="Q11"&gt;Click me&lt;/button&gt;

【讨论】：