javascript - passing arguments to a function

Question

I've got a function that is working fine (well, almost fine):

function clickMe() {
    var evt = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window,
    });
    var buttonId = document.getElementById("fib_button")
    h = buttonId.nextSibling;
    h.className = (h.className == 'hidden') ? '' : 'hidden';
    buttonId.innerHTML = (buttonId.innerHTML == 'Show') ? 'Hide' : 'Show';
}

document.getElementById("fib_button").addEventListener('click', clickMe);

Now, I want to make it more generic so that the ID name gets passed to the function so I don't have to hard code it within the body of the function but it does not work:

function clickMe(divID) {
    var evt = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window,
    });
    var buttonId = document.getElementById(divID)
    h = buttonId.nextSibling;
    h.className = (h.className == 'hidden') ? '' : 'hidden';
    buttonId.innerHTML = (buttonId.innerHTML == 'Show') ? 'Hide' : 'Show';


}

document.getElementById("fib_button").addEventListener('click', clickMe("fib_button");

Another problem I have is that in this line:

buttonId.innerHTML = (buttonId.innerHTML == 'Show') ? 'Hide' : 'Show';

"Hide/Show" should be put the other way round but if I swap the two, it stops working correctly.

Please advise

Here's a fiddle https://jsfiddle.net/2b3b7kp5/14/

Use anonymous function document.getElementById("fib_button").addEventListener('click', function() {clickMe("fib_button"); }). Here is Updated Fiddle — Tushar
– Tushar, Commented Oct 17, 2015 at 20:43
Thank you. It works. You seem to have tidied up my html which broke the code in terms of recognising nextSibling. It looks like the next sibling element needs to be in the same line: <button id="fib_button">Show</button><div> — Wasteland
– Wasteland, Commented Oct 17, 2015 at 20:53

João Antunes · Accepted Answer · 2015-10-17 20:55:48Z

1

Keep in mind that the addEventListener function is waiting for a function and as such your clickMe function should return one. Inside the clickMe function you may then return an anonymous function that we'll have access to the the scope and whatever arguments you send to clickMe.

What you're looking for is something like this:

function clickMe(divID) {
    return function () {
        var evt = new MouseEvent("click", {
            bubbles: true,
            cancelable: true,
            view: window,
        });
        console.log(divID);
        var buttonId = document.getElementById(divID)
        h = buttonId.nextSibling;
        h.className = (h.className == 'hidden') ? '' : 'hidden';
        buttonId.innerHTML = (h.className == 'hidden') ? 'Show' : 'Hide';
    }
}

document.getElementById("fib_button").addEventListener('click', clickMe("fib_button"));

answered Oct 17, 2015 at 20:55

João Antunes

5814 silver badges9 bronze badges

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

1 Comment

BenG Over a year ago

clickMe("fib_button") inside the addEventListener would fire immediately on page load.

nikita-graf · Accepted Answer · 2015-10-17 20:55:08Z

0

Use anonymous functions function () { return function() {...}} Updated example https://jsfiddle.net/2b3b7kp5/25/

answered Oct 17, 2015 at 20:55

nikita-graf

3962 silver badges6 bronze badges

Comments

BenG · Accepted Answer · 2015-10-17 20:55:20Z

0

to be more generic, it might be best to use this.

function clickMe() {  
    h = this.nextSibling;
    h.className = (h.className == 'hidden') ? '' : 'hidden';
    this.innerHTML = (this.innerHTML == 'Show') ? 'Hide' : 'Show';
}

document.getElementById("fib_button").addEventListener('click', clickMe);

then this would be the element which triggered the event.

Another problem I have is that in this line:

buttonId.innerHTML = (buttonId.innerHTML == 'Show') ? 'Hide' : 'Show';

"Hide/Show" should be put the other way round but if I swap the two, it stops working correctly

if you swap then, you would be setting innerHTML to show if it says show, everytime. therefore it would never change.

answered Oct 17, 2015 at 20:55

BenG

15.2k5 gold badges48 silver badges62 bronze badges

Collectives™ on Stack Overflow

javascript - passing arguments to a function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related