title: JS Text Loop Buttons
body: <p>I got the answer for my previous question in the form of <a href="http://jsfiddle.net/5NUPn/5/" rel="nofollow">http://jsfiddle.net/5NUPn/5/</a> but when I put the code to my a normal html page its not playing the same. Please let me know where I made a mistake... </p>
  
  <p>Below is the code in my HTML </p>
  
  <pre><code>&lt;!DOC html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  var messages = [
      'Messages for &lt;em&gt;kindergarden&lt;/em&gt; class',
      'Message for &lt;em&gt;1st grade&lt;/em&gt;',
      'Message for &lt;em&gt;2nd grade&lt;/em&gt;',
      'Message for &lt;em&gt;3rd grade&lt;/em&gt;',
      'Message for &lt;em&gt;4th grade&lt;/em&gt;',
      'Message for &lt;em&gt;5th grade&lt;/em&gt;',
      'Message for &lt;em&gt;6th grade&lt;/em&gt;'
  ];
  
  var msgPtr = 0;
  var player;
  function nextMsg(direction, loop) {
      msgPtr = msgPtr + direction;
      if (msgPtr &lt; 0) { msgPtr = messages.length-1; }
      if (msgPtr &gt; messages.length-1) { msgPtr = 0; }
      document.getElementById('msg').innerHTML = messages[msgPtr];
      if(loop){
          player = setTimeout(function(){ nextMsg(1, true); }, 1000);
      }
  }
  function toggleMsg()
  {
      clearTimeout(player);
  }
  nextMsg(0, true);
  
  $(function(){
      $('.prev').click(function(){
         clearTimeout(player);
          nextMsg(-1, false);
          $('.playpause').removeClass('playing').addClass('stopped').text('play');
      });
      $('.next').click(function(){
          clearTimeout(player);
          nextMsg(1, false);
          $('.playpause').removeClass('playing').addClass('stopped').text('play');
      });
      $('.playpause').click(function(){
         if($(this).hasClass('stopped'))
         {
             nextMsg(0, true);
             $(this).removeClass('stopped').addClass('playing').text('pause');
         }
          else
          {
              clearTimeout(player);
              $(this).removeClass('playing').addClass('stopped').text('play');
          }
      });
  });
  &lt;/script&gt;
  
  
      &lt;style type="text/css"&gt;
          em { color:orange; }
          #msg { 
              font-family:monospace; 
              background-color:yellow;
              font-size:1em; 
              border:1px dotted red; 
              overflow:hidden;
          /*float: left;*/
          }
          #buttons { /*float: right;*/ }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="msg"&gt;&lt;/div&gt;
      &lt;div id="buttons"&gt;
          &lt;button class="prev"&gt;&amp;lt;&lt;/button&gt;
          &lt;button class="playpause playing"&gt;pause&lt;/button&gt;
          &lt;button class="next"&gt;&amp;gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>