Including a parameter in btn.onclick = function()

Question

I'm calling a function when I press a button. When I use the btn.onclick = function() the button is pressed and the function is completed. If I change the HTML to include onclick=clicked() and the javascript to function clicked(), it does not run.

I've tried both these methods because I want to be able to pass a parameter through the function (as I have lots of buttons and I want to use as little code as possible).

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"
    }
  }
}

How do I get it where I can pass a parameter through the btn.onclick function so that any button can call that function but pass a different parameter through it? Is there an equivalent for onclick="function(a)" but for event handlers/listeners?

Any help is appreciated.

`.onclick = () => someFn('someParam')` – CertainPerformance Feb 18 '19 at 07:23 — CertainPerformance, Feb 18 '19 at 07:23

ellipsis · Accepted Answer · 2019-02-18T07:39:09.790

2

You can pass parameters in the onclick call in the inline function call

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>

edited Feb 18 '19 at 07:39

answered Feb 18 '19 at 07:27

ellipsis

12,049
2
17
33

How would i get this work with buttons that have different ID's? – JackU Feb 18 '19 at 07:32
Actually *for this case* id does not matter, for different buttons you can pass different parameters on the same function and it will perform. Every button will have different parameters that will be sent to function. Check the edits – ellipsis Feb 18 '19 at 07:35
The function works great. However, when the `function a()` is outside of the `window.onload = function()`, `function a()` works but the `span.onclick` does not. When inside the `window.onload`, I get the error `a is not defined`. Any ideas? – JackU Feb 18 '19 at 07:47
Keep everything the same and put `var modal = document.getElementById('myModal'); var btn = document.getElementById("Q11"); var span = document.getElementsByClassName("close")[0];` in the global not inside the window.onload function – ellipsis Feb 18 '19 at 10:45

score 0 · Answer 2 · answered Feb 18 '19 at 07:26

You set onclick to a wrapper function and inside it call the real function with parameters

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>

Including a parameter in btn.onclick = function()

2 Answers2