Specific button to trigger function on specific item (JavaScript)

Question

I know there are better ways to do this, but for learning purpose please help me with this. I have an HTML with multiple buttons and multiple lists. I want for each button, when clicked, to hide/show the list under it. I want to understand how to do this in JavaScript. Here is the code I have so far. Cannot post the full HTML as it has private information, but it looks something like this.

<div id="conf" class="article">
<button>Education</button>

    <ul>
        <LI>2Sofic Groups a IMAR
        <LI>2Theory and Operator Algebra
        <LI>2 Geometric Group Theory
        <LI> 4th annual meeting
        <LI>2007: Co-organizer of 
    </ul>
</div>
<div id="conf" class="article">
<button>Education</button>

    <ul>
        <LI>2Sofic Groups a IMAR
        <LI>2Theory and Operator Algebra
        <LI>2 Geometric Group Theory
        <LI> 4th annual meeting
        <LI>2007: Co-organizer of 
    </ul>
</div>
<script>
var clickerbutton = document.getElementsByTagName("button");
var listEl = document.getElementsByTagName("ul");

//function to be run when event listener is fired
var onButtonClick = function() {
    listEl[i].classList.toggle("hide");
}

//event listener
for (i = 0; i < clickerbutton.lenght; i++){
    clickerbutton[i].addEventListener("click", onButtonClick);
}
</script>

Thank you for any help and explanation.

Answer 1

You will have to bind the function parameters in the callback function reference. Note that the first parameter of the bind function sets the "this" parameter of the "onButtonClick" function (which is not used).

var onButtonClick = function(index) {
    listEl[index].classList.toggle("hide")
}

for (i = 0; i < clickerbutton.length; i++){
    clickerbutton[i].addEventListener("click", onButtonClick.bind(null, i));
}

Answer 2

You have to use .bind just like mentionned by @mfranchi

  var clickerbutton = document.getElementsByTagName("button"); var listEl = document.getElementsByTagName("ul"); var onButtonClick = function(index) { listEl[index].classList.toggle("hide") } for (i = 0; i < clickerbutton.length; i++){ clickerbutton[i].addEventListener("click", onButtonClick.bind(null, i)); } 

 .hide{ visibility: hidden; } 

 <div id="conf" class="article"> <button>Education</button> <ul> <LI>2Sofic Groups a IMAR <LI>2Theory and Operator Algebra <LI>2 Geometric Group Theory <LI> 4th annual meeting <LI>2007: Co-organizer of </ul> </div> <div id="conf" class="article"> <button>Education</button> <ul> <LI>2Sofic Groups a IMAR <LI>2Theory and Operator Algebra <LI>2 Geometric Group Theory <LI> 4th annual meeting <LI>2007: Co-organizer of </ul> </div> 

Answer 3

You can show/hide elements based on style property "none" and "block"

var clickerbutton = document.getElementsByTagName("button");
    var listEl = document.getElementsByTagName("ul");

    function findArrayIndex(arr,val)
    {
        for(var cnt=0;cnt<arr.length;++cnt)
        {
            if(arr[cnt] === val)
                return cnt;
        }

        return -1;
    }

    var onButtonClick = function(e,ar) 
    {
        var index = findArrayIndex(clickerbutton,this);
        if(index !== -1 && listEl.length>index)
        {
            if(listEl[index].style.display ==='none')
            {
                listEl[index].style.display = 'block';
            }
            else
            {
                listEl[index].style.display = 'none';
            }
        }
    }
        //event listener
    for (var i = 0; i <clickerbutton.length; i++)
    {
        clickerbutton[i].addEventListener("click", onButtonClick);
    }