Question

So I’ve created a dynamic scroll that worked in jsfiddle –> http://jsfiddle.net/9zXL5/39/

var movelist = document.getElementById('movelist');

function yHandler() {
    var contentHeight = movelist.scrollHeight;
    var yOffset = movelist.clientHeight;
    var y = yOffset + movelist.scrollTop;
    if (y >= contentHeight) {
        movelist.innerHTML += '<div class ="newData">yooooo</div>';
    }
}


movelist.onscroll = yHandler;​

but it had uncaught errors such as yHandler not being defined. So I fixed the errors by placing var movielist=.. and movielist.onscroll = yHandler; inside my $(document).ready. The errors are gone, but now content won’t load when my scroll hits the bottom as seen –> http://jsfiddle.net/9zXL5/40/

$(document).ready(function() {
    var movelist = document.getElementById('movelist');

    movelist.onscroll = yHandler;
});

function  yHandler (){

        var contentHeight = movelist.scrollHeight;

        var yOffset = movelist.clientHeight;

        var y = yOffset + movelist.scrollTop;

        if(y >= contentHeight){

            movelist.innerHTML += '<div class ="newData">hey look at me</div>';

        });
    }
}

and I cannot figure out why. I would really appreciate it if someone explained to me why this is so.

Answer 1

You have several errors in your fiddle:

1. You where not loading jQuery
2. You had several syntax errors

Here is a working fiddle: http://jsfiddle.net/9zXL5/42/

It helps if you use a console (chrome/devtools or FF/firebug) to spot the errors and correct them. In your case, you had closing parentheses and brackets here:

        movelist.innerHTML += '<div class ="newData">hey look at me</div>';
    }); // <-- remove the );
} // <-- remove this line