Adding 'Click' Event Listeners in Loop

addEventListener using for loop and passing values

Closures! :D

This fixed code works as you intended:

// Function to run on click:function makeItHappen(elem, elem2) {    var el = document.getElementById(elem);    el.style.backgroundColor = "red";    var el2 = document.getElementById(elem2);    el2.style.backgroundColor = "blue";}
// Autoloading function to add the listeners:var elem = document.getElementsByClassName("triggerClass");
for (var i = 0; i < elem.length; i += 2) {    (function () {        var k = i + 1;        var boxa = elem[i].parentNode.id;        var boxb = elem[k].parentNode.id;        elem[i].addEventListener("click", function() { makeItHappen(boxa,boxb); }, false);        elem[k].addEventListener("click", function() { makeItHappen(boxb,boxa); }, false);    }()); // immediate invocation}

<div class="container">  <div class="one" id="box1">    <p class="triggerClass">some text</p>  </div>  <div class="two" id="box2">    <p class="triggerClass">some text</p>  </div></div>
<div class="container">  <div class="one" id="box3">    <p class="triggerClass">some text</p>  </div>  <div class="two" id="box4">    <p class="triggerClass">some text</p>  </div></div>

Adding 'click' event listener using 'for' loop

This is because your event handler will be called later (by user action), and that time, i isn't what you want. You have to use closure to keep it internal.

var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com'];
function openURL(link) {  console.log(link);};

window.onload = function () {
    var listElement = document.getElementsByTagName('li');
    for (i=0;i<listElement.length;i++) {        listElement[i].addEventListener('click',(function (i) {          return function () {            openURL(links[i]);          };        }(i)));    }
}

<li>Facebook</li><li>Twitter</li><li>Souncloud</li>

Adding Click Event Listeners During Iteration?

So a few things crosses my mind:

Firstly, edit_entry.bind(this, key);: Are you certain this is pointing to what you want? It should be pointing to the window object. Also, is there any reason to bind context for that particular function?

Secondly innerHTML: Generally it's discouraged to use innerHTML directly. I don't know how/when the browser layouts changes to innerHTML, the div might not be on the page when you call getElementById. As an alternative, you could try document.createElement("div"), set its properties accordingly and finally append it to lex_body.

Edit

From mdn:

Please note that using innerHTML to append html elements (e.g. el.innerHTML += "link") will result in the removal of any previously set event listeners. That is, after you append any HTML element that way you won't be able to listen to the previously set event listeners.

Adding addEventListener() in loop only works for last button

The main problem is that you redefine the HTML of adiv completely every time you iterate. This means that any event handler you had already bound to a child element of adiv is lost the moment you do adviv.innerHTML = .... Although you assign the same HTML plus some new one, you don't assign the event handlers that were previously defined. So they are lost.

Only the event handler you assign at the last iteration is not destroyed in this way.

Solution

A quick solution would be to first loop to create all the HTML, and then do a separate loop to assign the event handlers:

// First add all the new content:
var html = adiv.innerHTML;
for (var i = 0; i < array_length; ++i) {
    var obj = data.Items[i];

    html += "<div class='row'><div class='center-div six columns'>" + obj.Event + ", " + obj.Location + "</div></div>";
    html += "<div class='row'><div class='center-div six columns'>" + obj.Date + ", " + obj.Time + "</div></div>";
    html += "<div class='row'><div class='center-div six columns'><button id='yay_button_" + i + "' class='button-primary'>Deltag</button></div></div>";
}
adiv.innerHTML = html;

// Now bind the event handlers
// By using "let" instead of "var" the right value is retained
// in the handlers
for (let i = 0; i < array_length; ++i) {
    var elem = document.getElementById('yay_button_' + i);
    elem.addEventListener('click', function() {
        alert('id: ' + i);
    });
}

If your browser does not support ES2015 (for let), then you can use bind:

for (var i = 0; i < array_length; ++i) {
    var elem = document.getElementById('yay_button_' + i);
    elem.addEventListener('click', function(i) {
        alert('id: ' + i);
    }.bind(null, i));
}