addEventListener will not attach a listener to the element

Question

/***************************************************** *
*  Function: renderTodos                             
*  Builds a list of todo items from an array
*  rebuilds list each time new item is added to array
****************************************************** */
function renderTodos(arr) {

  // erases all previous content
  uList.innerHTML = '';

  for ( var i = 0; i < tdArray.length; i++ ) {

    // create a link element
    var remex = document.createElement('span');
    //link element didn't work so try a button
    //var remex = document.createElement('input');
        //remex.setAttribute('type','button');
        remex.setAttribute('class', 'deletex');
        remex.innerHTML="X";
        // set attribute index and value
        remex.setAttribute('index', i);
        remex.addEventListener('click',removeTodo);
    console.dir(remex);   

        // create <li> element
    var li_element = document.createElement('li');
        li_element.style.lineHeight = "20pt";
        li_element.appendChild(remex);
        li_element.innerHTML += tdArray[i];

    // add item to list
    uList.appendChild(li_element);
    inField.value = '';
  }

} // /renderTodos

This function builds a list based on text field inputs. Each time the the "add item" button is clicked, the event calls this function to add the item to the list. Everything works beautifully UNTIL I try to add the eventListener to the "x" that is appended to the li element prior to the list item text. The idea is that the "x" is clickable, and onClick it removes the list item entry from the list. But I have tried 6 ways to Sunday to attach an eventListener to the "x" object and nothing works. I have tried attaching the event listener to a span object, and a button object; I have moved "remex.addEventListener..." all around in the function, after it has been rendered, before it gets rendered, etc.; I have eliminated the CSS; I have tried changing the addEventListener to onClick; I have tried this code on our own Apache server, I have moved it to jsbin.com in hopes that some server setting was getting in my way; and probably a few more things I can't remember in the long list of things I have tried. As you see, I have tried it as a button and as a span, hence the commented code.

In short, no matter what I try, the eventListener will NOT attach to the "x". Any ideas? Do you need to see more of the code?

[`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener) takes at least two arguments, what is `removeTodo`? — Teemu, Mar 19 '14 at 16:42
That's what I thought, but I have tried moving the line "remex.addEventListener(removeTodo);" after the line "uList.appendChild(li_element);" with no success. Here is the revised loop code snippet: " // add item to list uList.appendChild(li_element); remex.addEventListener(removeTodo); inField.value = ''; " Though it still does not work. — paidforbychrist, Mar 19 '14 at 16:57
Yes, removeTodo is a variable name holding the function. But the problem is, the "x" is not clickable. Even if I am calling the function wrongly, wouldn't the "x" still be clickable? — paidforbychrist, Mar 19 '14 at 17:04
Darned jsbin, doesn't save my changes. Here is the CORRECT line: remex.addEventListener("click", removeTodo); still doesn't attach. — paidforbychrist, Mar 19 '14 at 17:06
right teemu, sorry for the bad copy and paste. the code actually does have two arguments. — paidforbychrist, Mar 19 '14 at 17:07
Open your browser console and check for errors. That's usually the place to start. — adeneo, Mar 19 '14 at 17:10
yes, Teemu, I did define removeTodo *before* I called renderTodos(). No, I am testing with Mac Chrome, and Mac FF latest versions. — paidforbychrist, Mar 19 '14 at 17:13
Thanks adeneo, I have tried console.dir, Visual Event, and jsbin.com, google, and contacted two coders better than I so far. — paidforbychrist, Mar 19 '14 at 17:15
What is `tdArray`? It's not the same as the `arr` argument in the function? On the other hand, that would throw an error in the console, and you checked that right ! — adeneo, Mar 19 '14 at 17:20

Teemu · Accepted Answer · 2014-03-19T17:38:38.010

4

This line overrides the attached eventlistener:

li_element.innerHTML += tdArray[i];

Setting innerHTML replaces all the original elements within li_element. += is just a shortcut to li_element.innerHTML = li_element.innerHTML + tdArray[i];

If tdArray[i] contains just some text, you can add its content like this:

li_element.appendChild(document.createTextNode(tdArray[i]));

If tdArray[i] contains elements, you could append a wrapper element, and then set the innerHTML of the wrapper.

edited Mar 19 '14 at 17:38

answered Mar 19 '14 at 17:18

Teemu

22,918
7
53
106

I am saving this advice for future reference. Thank you again! I have been working on this for days! – paidforbychrist Mar 19 '14 at 17:33
@user3438536 Maybe you also want to accept the answer ; ). – Teemu Mar 19 '14 at 17:35
+1 thanks for sharing this, I did something similar with using `innerHTML +=` & noticed the element did not have the function I attached with `addEventListener` – waffledood Dec 31 '22 at 01:39

addEventListener will not attach a listener to the element

1 Answers1