Js call function with arguments

Question

I have created 4 buttons and every button with its own id and I have a function that displays the given element id. so I want to apply it on all this 4 buttons. what did I do wrong?

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>

<script type="text/javascript">
    
function show_id(element){
    alert(element.id)
}

for(i=0; i!=document.getElementsByTagName('button');i++){

    target = document.getElementsByTagName('button')[i]
    target.onclick = show_id(target)

}

</script>
</body>
</html>

You probably meant i!=document.getElementsByTagName('button').length. As it stands, you're comparing a number to an HTMLCollection, potentially creating an infinite loop, only stopped by the error it creates inside the loop. — connexo
– connexo, Commented Dec 24, 2020 at 9:42
wait so you would like that the button which was pressed do the alert? — Aalexander
– Aalexander, Commented Dec 24, 2020 at 9:50

Nikhil Patil · Accepted Answer · 2020-12-24 10:15:24Z

1

Do it as below -

function show_id() {
  alert(this.id)
}

var buttons = document.querySelectorAll("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = show_id;
}

<button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>

Passing arguments to onclick event -

Using HTML -

function show(element, value) {
  console.log(element.id);
  console.log(value);
}

<button id='b1' onclick='show(this, "a")'>Click</button>

Using JS -

function show(value, event) {
 console.log(value);
 console.log(event.target.id);
}

var button = document.getElementById("b1");

button.onclick = show.bind(this, "a");

<button id='b1'>Click</button>

But, as mentioned by @connexo, use addEventListener to bind DOM events.

edited Dec 24, 2020 at 10:15

answered Dec 24, 2020 at 9:49

Nikhil Patil

2,5331 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

badr Over a year ago

is it necessary to write (element) after the function ?

Nikhil Patil Over a year ago

@badr, No, not required. I have removed it.

badr Over a year ago

i want to know how to use a function with arguments in "onclick" Attribute

connexo Over a year ago

I really recommend you stop using index-based loops, the var keyword (unless you know exactly why you are using it over const or let) and also element.onevent-properties. Use the DOM API which offers element.addEventListener(eventName, handlerFunction).

Nikhil Patil Over a year ago

@connexo, Agreed! I tried to stick to the original code posted by the poster for the sake of the problem faced.

|

connexo · Accepted Answer · 2020-12-24 09:51:07Z

1

Here's how you would do this in modern JS:

for (const button of document.querySelectorAll('button'))
  button.addEventListener('click', function() { console.log(this.id) })

<button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>

Explanation:

When you register a regular function() as an event listener and it gets executed because the event occurs, the this keyword inside the function will point to the element that the listener was registered on.

answered Dec 24, 2020 at 9:51

connexo

57.2k15 gold badges112 silver badges149 bronze badges

2 Comments

connexo Over a year ago

Btw, I haven't used a single index-based for-loop in the past 3 years, and I do web development as a professional on a daily basis. I recommend you dig into forEach and for...of loops.

badr Over a year ago

i will do that, Thanks For Helping

Onkar · Accepted Answer · 2020-12-24 10:07:09Z

0

Okay, update the code to use with querySelectorAll and forEach, might help you to understand.

document.querySelectorAll('button').forEach((button)=>{
  button.addEventListener('click', function(){
   console.log(this.id);
  });
});

<button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>

edited Dec 24, 2020 at 10:07

answered Dec 24, 2020 at 9:55

Onkar

2,5942 gold badges16 silver badges16 bronze badges

2 Comments

connexo Over a year ago

Usage of inline event listeners is really bad coding practice, please don't suggest that to someone that has already passed that stage of noob coding.

badr Over a year ago

i want to use a function with arguments in the "onclick" that's what i want to know how

Dharman · Accepted Answer · 2021-01-08 20:14:36Z

-1

You can get your button elements length and iterate through your buttons.

I would recommend creating a class for something like this, so instead of just take all buttons give the buttons you would like to involve in this the same class.

Here is a way you can do it.

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>

    <button id='b1' class="btnWithID">Click</button>
    <button id='b2' class="btnWithID">Click</button>
    <button id='b3' class="btnWithID">Click</button>
    <button id='b4' class="btnWithID">Click</button>

    <script type="text/javascript">
        
    function show_id(){
        alert(this.id)
    }


    let btns = document.querySelectorAll('.btnWithID');
    for(i=0; i < btns.length ;i++){

        btns[i].onclick = show_id;

    }


    </script>



    </body>
    </html>

edited Jan 8, 2021 at 20:14

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Dec 24, 2020 at 9:45

Aalexander

4,9843 gold badges13 silver badges37 bronze badges

5 Comments

badr Over a year ago

when i run it it alerts all the classes but nothing shows when i click them

Aalexander Over a year ago

Sorry with the argumentation it will applied to all of the 4 buttons I was a bit missleaded. I have updated my answer now

badr Over a year ago

someone already wrote the same answer, but thanks anyways.

badr Over a year ago

and there's no need for a class i think, you can just querySelectorAll('button') or getElementByTagName('button')

Aalexander Over a year ago

Probably you dont want to call that function for every button on your site just for a specific amount of buttons. Thats why I would recommend to use classes.

Collectives™ on Stack Overflow

Js call function with arguments

4 Answers 4

7 Comments

2 Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related