Uncaught ReferenceError, my function is not defned
<p>I'm creating a dyanamic scrolling div and it works fine on Jsfiddle as seen here --> <a href="http://jsfiddle.net/9zXL5/19/embedded/result/" rel="nofollow">http://jsfiddle.net/9zXL5/19/embedded/result/</a> yet on the browser I get: </p>

<blockquote>
  <p>Uncaught TypeError: Cannot set property 'onscroll' of null</p>
</blockquote>

<p>So then I added <code>$(document).ready(function (){</code> to my code and got </p>

<blockquote>
  <p>Uncaught ReferenceError: yHandler is not defined</p>
</blockquote>

<p>I'm not understanding why I'm getting these errors yet its flowing smoothly on jsfiddle. I'd really appreciate it if someone could tell me what I'm not understanding or missing. Code in question is below</p>

<pre><code>var movelist = document.getElementById('movelist');
    $(document).ready(function (){
    function  yHandler (){
        var contentHeight = movelist.scrollHeight;
        var yOffset = movelist.clientHeight;
        var y = yOffset + movelist.scrollTop;
        if(y &gt;= contentHeight){
            movelist.innerHTML += '&lt;div class ="newData"&gt;hey look at me&lt;/div&gt;';
        }
    }
});
movelist.onscroll = yHandler;
</code></pre>
