html - JavaScript interactive chat animation -

let me preface saying while have experience html , css, i'm still trying grasp basics of javascript.

a friend , trying use skeleton of chat code codepen: http://codepen.io/clintioo/pen/hakjq

javascript function:

    function handlemessage(event) {                    var chatnewthread = document.createelement('li'),                     chatnewmessage = document.createtextnode(event.data);                    // add message chat thread , scroll bottom                   chatnewthread.appendchild(chatnewmessage);                   chatthread.appendchild(chatnewthread);                   chatthread.scrolltop = chatthread.scrollheight;                    // clear text value                   chatwindowmessage.value = '';                 } 

html:

            <ul class="chat-thread">                       <li>message 1</li>                       <li>message 2</li>                       <li>message 3</li>             </ul>                  <form class="chat-window">                   <input id="userinput" class="chat-window-message" name="chat-window-message" type="text" autofocus />                 </form>          </section>         </div> 

we find once start editing code offline, input doesn't work should. we've tried copying exactly, text goes input form doesn't added animation.

i'm whatever problem comes function above, limited knowledge of javascript keeping me stumped.

any insight appreciated.