Uncaught RangeError: Maximum call stack size exceeded with innerHTML

Question

I'm not very experienced with Javascript, but I'm running into an issue I can't 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;
}

The exception occurs on the last line of the LocalMain() function, when I replace the innerHTML with my newly-modified string. Is there something in this code that causes a loop or overflow?

Answer 1

You are causing an infinite loop!

You are listening to DOMSubtreeModified on the element chat_line_list, then you update that element inside of the function attached to that event!

Answer 2

try this

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);

}