Question

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

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

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)"是否有等效项？

感谢您的帮助。

Answer 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>

Answer 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>

在btn.onclick = function（）中包含参数

2 个答案: