JavaScript throws an error - Code in a loop doesn't work

Question

My code throws a InternalError: too much recursion. Why does this happen?

I am manipulating the DOM, and then I'm calling setInterval to run the code again.

lol();
var lol = function () {
    // Do lots of DOM manipulation
    if (document.getElementById('workarea').getElementsByClassName('question')[0].getElementsByClassName('graphie')[0].getElementsByClassName('graphie-label')[0].getElementsByClassName('katex-holder')[0].getElementsByClassName('katex')[0].getElementsByClassName('katex-inner')[0].getElementsByClassName('base textstyle uncramped')[0].getElementsByClassName('sizing reset-size5 size10 mord')[0].getElementsByClassName('mord textstyle uncramped')[0].getElementsByClassName('mord')[0].innerHTML == '<span class="mclose">?</span>') {
        var l = document.getElementById('workarea').getElementsByClassName('question')[0].getElementsByClassName('graphie')[0].getElementsByClassName('graphie-label')[0].getElementsByClassName('katex-holder')[0].getElementsByClassName('katex')[0].getElementsByClassName('katex-inner')[0].getElementsByClassName('base textstyle uncramped')[0].getElementsByClassName('sizing reset-size5 size10 mord')[0].getElementsByClassName('mord textstyle uncramped')[0].getElementsByClassName('mord')[2].innerHTML;
    } else {
        var l = document.getElementById('workarea').getElementsByClassName('question')[0].getElementsByClassName('graphie')[0].getElementsByClassName('graphie-label')[0].getElementsByClassName('katex-holder')[0].getElementsByClassName('katex')[0].getElementsByClassName('katex-inner')[0].getElementsByClassName('base textstyle uncramped')[0].getElementsByClassName('sizing reset-size5 size10 mord')[0].getElementsByClassName('mord textstyle uncramped')[0].getElementsByClassName('mord')[0].innerHTML;
    }
    var ll = document.getElementById('workarea').getElementsByClassName('question')[0].getElementsByClassName('graphie')[0].getElementsByClassName('graphie-label')[0].getElementsByClassName('katex-holder')[0].getElementsByClassName('katex')[0].getElementsByClassName('katex-inner')[0].getElementsByClassName('base textstyle uncramped')[0].getElementsByClassName('sizing reset-size5 size10 mord')[0].getElementsByClassName('mord textstyle uncramped')[0].getElementsByClassName('mord')[1].innerHTML;
    var sum = parseInt(l) + parseInt(ll);
    document.getElementById('answercontent').getElementsByClassName('fancy-scrollbar solutionarea')[0].getElementsByTagName("input")[0].setAttribute("value", sum);
    document.getElementById('check-answer-button').removeAttribute("disabled");
    
    // Run the code in a loop
    setInterval(lol(), 100000);
}  

Answer 1

setInterval(lol(),100000); executes lol instantly, and delays the execution of the return value.

Use

 setInterval(lol, 100000);

instead.

While we're at it, you're doing a pretty expensive bit of chaining to find the same element multiple times, use variables to store your references:

lol();
var lol = function () {
    var q1 = document.getElementById('workarea').getElementsByClassName('question')[0];
    var katex = q1.getElementsByClassName('graphie')[0].getElementsByClassName('graphie-label')[0].getElementsByClassName('katex-holder')[0].getElementsByClassName('katex')[0];
    var mords = katex.getElementsByClassName('katex-inner')[0].getElementsByClassName('base textstyle uncramped')[0].getElementsByClassName('sizing reset-size5 size10 mord')[0].getElementsByClassName('mord textstyle uncramped')[0].getElementsByClassName('mord');
    var input =  document.getElementById('answercontent').getElementsByClassName('fancy-scrollbar solutionarea')[0].getElementsByTagName("input")[0];

    var l;

    if (mords[0].innerHTML == '<span class="mclose">?</span>') {
        l = mords[2].innerHTML;
    } else {
        l = mords[0].innerHTML;
    }
    var ll = mords[1].innerHTML;
    var sum = parseInt(l) + parseInt(ll);
    input.setAttribute("value", sum);
    document.getElementById('check-answer-button').removeAttribute("disabled");

    setInterval(lol, 100000);
}