www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Repeating Text Problem

  1. #1
    Join Date
    Aug 2010
    Posts
    3

    resolved [RESOLVED] Repeating Text Problem

    I'm trying to make an application that repeats the word "blah" every second and stops repeating it after 100 times. For some reason, it only says it once. Here's my code:

    Code:
    <html>
    <head>
    	<title>
    	animation
    	</title>
    
    	<script type = "text/javascript">
    		var a = 0;
    		var b = 0;
    		setTimeout(a++, 1000);
    	</script>
    </head>
    <body>
    	<script type = "text/javascript">
    		while (a == 1)
    		{
    			document.write('blah');
    			b++;
    			
    			if (b == 100)
    			{
    			a = 10;
    			}
    			else
    			{
    			a = 0;
    			}
    		}
    	</script>
    </body>
    </html>
    Could someone explain what I did wrong?

    Thanks in advance.

  2. #2
    Join Date
    Feb 2006
    Posts
    2,926
    A timeout only fires once, and after the page loads, document.write closes and opens a new document.

    Use setInterval and either re write innerHTML for each update, or add a text node to the existing content.

    One solution-


    Code:
    <html>
    <head>
    <title>animation</title>
    <script> 
    var counter=100, para, timer;
    window.onload= function blah100(){
        para= document.getElementsByTagName('p')[0];
        timer= setInterval(function(){
            if(--counter){
                para.appendChild(document.createTextNode(' blah '));
            }
            else clearInterval(timer);
        }, 250);
    }
    </script> 
    </head>
    <body>
    <h1> Animation</h1>
    <p>Blah </p>
    </body>
    </html>
    Last edited by mrhoo; 08-07-2010 at 06:00 PM.

  3. #3
    Join Date
    Aug 2010
    Posts
    3
    Thanks! Is there any way to put an image in front of the text? I plan to replace the text with a space to make the image move.

  4. #4
    Join Date
    Feb 2006
    Posts
    2,926
    The container will need to be a <pre>, or if not, the element style must preserve white space (whitespace:pre;), otherwise the browsers will collapse multiple spaces into one. You'l need to add a <br> element every so often or you'll scroll the image off the page.

    You might want to consider changing the position of the element instead of prefixing spaces.
    Last edited by mrhoo; 08-07-2010 at 10:31 PM.

  5. #5
    Join Date
    Aug 2010
    Posts
    3
    How do I change the position? I was unable to find a tutorial to teach me how to draw images to the screen with javascript.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,635
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Moving image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    div#main{
    text-align:center;
    padding-top:100px;
    }
    h1 span{color:#dc143c;background-color:transparent;}
    p{width:100&#37;;text-align:left;}
    -->
    </style>
    <script type="text/javascript">
    <!--
    var counter = 100, para, timer;
    window.onload = function blah100(){
    var para = document.getElementsByTagName('p')[0];
    var spn = document.getElementsByTagName('H1')[0].getElementsByTagName('SPAN')[0];
    var timer = setInterval(function(){
    if(counter > 0){
    //para.appendChild(document.createTextNode(' blah '));
    var img = new Image();
    img.alt = 'image';
    img.src = "http://www.webdeveloper.com/forum/images/statusicon/user_offline.gif";
    para.appendChild(img);
    img.previousSibling.style.visibility = 'hidden';
    spn.innerHTML = 100 - counter;
    counter -= 1;
    }
    else{clearInterval(timer);para.lastChild.src = 'http://www.webdeveloper.com/forum/images/statusicon/user_online.gif';}
    }, 50);
    }
    //-->
    </script>
    </head>
    <body>
    <div id="main">
    <h1> Animation <span>&nbsp;</span></h1>
    <p><img src="http://www.webdeveloper.com/forum/images/statusicon/user_offline.gif" alt="image" /></p>
    </div>
    </body>
    </html>
    Last edited by Padonak; 08-08-2010 at 03:26 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles