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

Posted 2023-02-21

【中文标题】在 btn.onclick = function() 中包含一个参数 [重复]

【英文标题】：Including a parameter in btn.onclick = function() [duplicate]

【发布时间】：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')

【参考方案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");
  

<button id="Q11">Click me</button>