0

I've got a function that is supposed to append some text to all the images in a <section> on my page. Here's the function: 

function addDeleteButton(nodeList){
    var text = document.createElement("p");
    text.innerHTML = "Delete";
    text.style.position = "absolute";
    text.style.bottom = "3";
    text.style.right = "3";
    text.style.zIndex = "10";
    for(var i = 0; i<nodeList.length; i++){
        nodeList[i].onmouseover = function(){
            nodeList[i].appendChild(text);
        }
    }
}

But the problem is, that when I hover over the element, I get this error in the console:

TypeError : Cannot read property "appendChild" of undefined?

The function is executed when the window loads, so there's no problem with that, and the handler also works fine.

What's the problem? Thanks.

Andreas Louv
  • 46,145
  • 13
  • 104
  • 123
bool3max
  • 2,748
  • 5
  • 28
  • 57
  • What are you passing as the argument of the function? – Wes Foster Sep 26 '15 at 16:28
  • The error is telling you that nodeList[i] may be undefined. Try doing a console.log(nodeList) to make sure your list is correct – Hieu Le Sep 26 '15 at 16:29
  • @Wes Foster All the child nodes of my section: document.getElementById("images").childNodes – bool3max Sep 26 '15 at 16:30
  • @Hieu Le nodeList[i] does exist since my handler works. – bool3max Sep 26 '15 at 16:31
  • The question I've closed this as a duplicate of explains what's going on. The simplest way to fix it in your code is to change `nodeList[i].appendChild(text);` to `this.appendChild(text);`. – T.J. Crowder Sep 26 '15 at 16:31
  • @T.J.Crowder Thanks, that works. But the answer that you provided has absolutely no solution to my problem and involves using jQuery, therefore this question is not a duplicate, and should be unmarked. – bool3max Sep 26 '15 at 16:34
  • @ aCodingN00b: No, look again. I'm talking about the [*JavaScript closure inside loops – simple practical example*](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) link that's been inserted at the top of your question (that happens automatically when it gets closed as a duplicate), not the link that @radscheit posted (which is indeed jQuery-specific and unrelated). – T.J. Crowder Sep 26 '15 at 16:44
  • @T.J.Crowder Oops, I'm sorry, I had that link open and I thought that it was the question you provided. But still, my question isn't near a duplicate of that. When I had this problem, I didn't know it had anything to do with closures. – bool3max Sep 26 '15 at 16:49
  • @aCodingN00b: It's a pure duplicate. SO's "duplicate" thing isn't about whether the *questioner* understood it to be a duplicate. It's about whether the *answers* answer the question. It's also not pejorative (well, sometimes it is, if it's blatantly obvious the questioner didn't bother to search -- not the case here). Maybe your question shows up in somebody's search where that one wouldn't. Result! They get their answer. – T.J. Crowder Sep 27 '15 at 07:10

0 Answers0