# Adding eventListener to all items in prepopulated array

**URL:** <https://forum.kirupa.com/t/adding-eventlistener-to-all-items-in-prepopulated-array/633628>\
**Category:** programming\
**Created:** [August 19, 2015, 8:09am UTC](https://forum.kirupa.com/t/adding-eventlistener-to-all-items-in-prepopulated-array/633628 "2015-08-19T08:09:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![katsusauce](https://avatars.discourse-cdn.com/v4/letter/k/e8c25b/32.png) [@katsusauce](https://forum.kirupa.com/u/katsusauce)\
**Post date:** [August 19, 2015, 8:09am UTC](https://forum.kirupa.com/t/adding-eventlistener-to-all-items-in-prepopulated-array/633628/1 "2015-08-19T08:09:17Z")

</div>

Hi,

I’m new to JavaScript and I was wondering if anyone could help me.

I’m trying to add an eventListener to all items of a prepopulated array. Basically while clicking on 1 item in 1 array, I want to toggle the visibility of the item in the other array that corresponds with the item clicked in the first array.

I.e.

array1 = [1,2,3,4]  
array2 = [a,b,c,d]

I want all the items in the 2nd array hidden but when say item 1 in the first array is clicked, a in array2 will have its visibility toggle from hidden to visible, then when item 1 is clicked again it will toggle back from visible to hidden.

Any help would be greatly appreciated! Thank you in advance!

---

<div class="post-metadata">

**Author:** ![zeke\_chan](https://avatars.discourse-cdn.com/v4/letter/z/f14d63/32.png) [@zeke\_chan](https://forum.kirupa.com/u/zeke_chan)\
**Post date:** [August 20, 2015, 3:15am UTC](https://forum.kirupa.com/t/adding-eventlistener-to-all-items-in-prepopulated-array/633628/2 "2015-08-20T03:15:08Z")

</div>

You can’t add event listeners to an array itself. It has to be done on your user interface (UI)… either your radio button group, dropdown list, list box etc. When you do that you add an event listener to the UI component itself which usually contains the ID or index of the item you are currently clicking on. This ID will then be passed to the other array to retrieve the appropriate value.

Perhaps you could make a sample of what you want with the UI and post it here?

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [August 20, 2015, 4:16am UTC](https://forum.kirupa.com/t/adding-eventlistener-to-all-items-in-prepopulated-array/633628/3 "2015-08-20T04:16:42Z")

</div>

```javascript
// setup
var arr1 = []
for (var i = 0; i < 6; i++){
    var e = document.createElement('button')
    e.innerHTML = String.fromCharCode(97 + i)
    document.body.appendChild(e);
    arr1.push(e)
}

var arr2 = arr1.splice(3, 3)

// what katsusauce wants to happen
arr2.forEach(function(e){
    e.style.visibility = 'hidden'
})
arr1.forEach(function(e, i){
    e.addEventListener('click', function() {
        arr2[i].style.visibility = arr2[i].style.visibility == 'hidden' ? '' : 'hidden'
    })
})

```

---

<div class="post-metadata">

**Author:** ![zeke\_chan](https://avatars.discourse-cdn.com/v4/letter/z/f14d63/32.png) [@zeke\_chan](https://forum.kirupa.com/u/zeke_chan)\
**Post date:** [August 21, 2015, 3:37am UTC](https://forum.kirupa.com/t/adding-eventlistener-to-all-items-in-prepopulated-array/633628/4 "2015-08-21T03:37:37Z")

</div>

Hey krilnon, thanks for posting that. I learned something new =)

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [August 21, 2015, 4:03am UTC](https://forum.kirupa.com/t/adding-eventlistener-to-all-items-in-prepopulated-array/633628/5 "2015-08-21T04:03:54Z")

</div>

No problem. What’d you learn?

---

<div class="post-metadata">

**Author:** ![zeke\_chan](https://avatars.discourse-cdn.com/v4/letter/z/f14d63/32.png) [@zeke\_chan](https://forum.kirupa.com/u/zeke_chan)\
**Post date:** [August 21, 2015, 4:15am UTC](https://forum.kirupa.com/t/adding-eventlistener-to-all-items-in-prepopulated-array/633628/6 "2015-08-21T04:15:11Z")

</div>

I learned a new way to use the forEach method in Arrays =) Didn’t occur to me to solve it in this way. Your solution is elegant and simple… especially passing the `i` value to the buttons in the `arr1`