SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    run a function multiple times

    I made a sort of typewriter script that shows every next character of a text in a particular DIV, each milisecond.
    (testing in IE, not tested in other browsers yet)

    Now, after the function has run, I cannot run it again. It stops all completely.
    I have put some variable in it to see it's running or not. But that doesn't help it anyway.

    Anyone an explanation for me? Has this something to do with event bubbling or something else?


    Code JavaScript:
     
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Test</title>
    <script type="text/javascript">
     
    window.onload = function(){
     
    var originalDiv, output, letters; 	
    var teller = 0;
    var start = document.getElementById('start');
    var running = "no";
     
     
    function turnLetters(){
      if(teller < originalDiv.length){
          output.innerHTML = output.innerHTML + letters[teller];
          teller = ++teller;
          setTimeout(turnLetters, 1); // 1 milisecond, next letter
      }
    running = "no";
    }
     
     
    function gogogo(){
      running = "yes";
      originalDiv = document.getElementById('originalDiv').innerHTML;
      document.getElementById('originalDiv').style.visibility = "hidden";
     
      output = document.createElement('div');
      output.setAttribute('id','output');
      document.body.insertBefore(output, document.getElementById('originalDiv'));
     
      letters = originalDiv.split("");
      turnLetters();
      running = "no";
    }
     
     
     start.onclick = function(){
       if(running = "no"){
         gogogo();
        }
     }
     
     
    }
    </script>
     
    <style>
    #output, #originalDiv { width: 500px; }
    #start { display: block; text-align: center; width: 50px; height: 20px; border: 1px solid #0099ff; /* because that is our favourite colour isnt it */ }
    </style>
    </head>
    <body>
     
    <div id="start">Go !</div>
     
    <div id="originalDiv">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
    </body>
    </html>

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have declared that function (and variable that it uses) inside your onload event, so it can be called only from onload event handler. Move it out of event handler.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,
    I put it here as a demo:

    The typewriter script

  4. #4
    SitePoint Evangelist smftre's Avatar
    Join Date
    Dec 2008
    Location
    London
    Posts
    436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, that's a fast typewriter :P
    Statvoo.com The Website Traffic Monitor
    The best way to monitor traffic to your sites for free!


    Web Development London UK We make web 3.0 applications


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •