Uncaught RangeError: maximum call stack size exceeded with innerHTML

Question

I am not very good at Javascript, but I am facing a problem that I cannot understand. My code is very simple:

document.getElementById ('chat_line_list').addEventListener ("DOMSubtreeModified", LocalMain, false); function LocalMain () { var chatList = document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML; chatList = chatList.replace('InfoThump', '<span class="newemo-1 emoticon"></span>'); chatList = chatList.replace('MuskMelon', '<span class="newemo-2 emoticon"></span>'); chatList = chatList.replace('PoisonApple', '<span class="newemo-3 emoticon"></span>'); chatList = chatList.replace('PoisonBanana', '<span class="newemo-4 emoticon"></span>'); chatList = chatList.replace('PoisonWatermelon', '<span class="newemo-5 emoticon"></span>'); chatList = chatList.replace('PoisonGrape', '<span class="newemo-6 emoticon"></span>'); chatList = chatList.replace('NotNippy', '<span class="newemo-7 emoticon"></span>'); document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML = chatList; } 

An exception occurs in the last line of the LocalMain () function when I replace innerHTML with my newly modified line. Is there anything in this code causing a loop or overflow?

Answer 1

You cause an endless loop!

You listen to DOMSubtreeModified in the chat_line_list element, then you update this element inside the function attached to this event!

Answer 2

try it

 document.getElementById ('chat_line_list').addEventListener ("DOMSubtreeModified", LocalMain, false); function LocalMain () { var chatList = document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML; chatList = chatList.replace('InfoThump', '<span class="newemo-1 emoticon"></span>'); chatList = chatList.replace('MuskMelon', '<span class="newemo-2 emoticon"></span>'); chatList = chatList.replace('PoisonApple', '<span class="newemo-3 emoticon"></span>'); chatList = chatList.replace('PoisonBanana', '<span class="newemo-4 emoticon"></span>'); chatList = chatList.replace('PoisonWatermelon', '<span class="newemo-5 emoticon"></span>'); chatList = chatList.replace('PoisonGrape', '<span class="newemo-6 emoticon"></span>'); chatList = chatList.replace('NotNippy', '<span class="newemo-7 emoticon"></span>'); document.getElementById ('chat_line_list').removeEventListener ("DOMSubtreeModified", LocalMain); document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML = chatList; document.getElementById ('chat_line_list').addEventListener ("DOMSubtreeModified", LocalMain, false); } 

Answer 3

Yes, basically you say that every time this item changes, LocalMain should be executed. Since LocalMain also modifies the element, it runs over and over again ...

You can try to remove the EventListener and add it again after (haven't tried it, so I can't tell you if this will work ...)

 function LocalMain () { var chatList = document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML; chatList.removeEventListener("DOMSubtreeModified", LocalMain, false); chatList = chatList.replace('InfoThump', '<span class="newemo-1 emoticon"> (...) chatList = chatList.replace('NotNippy', '<span class="newemo-7 emoticon"></span>'); document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML = chatList; chatList.addEventListener ("DOMSubtreeModified", LocalMain, false); } 

Answer 4

I suggest waiting 100 microseconds before calling your function using the setTimeout() method. This works great for me - no errors yet.

  document.getElementById ('chat_line_list').addEventListener("DOMSubtreeModified", setTimeout(LocalMain, 100), false); 

Please keep in mind that this solution is far from perfect. This function is still performed frequently.