[RESOLVED] Repeating Text Problem

Printable View

08-07-2010, 04:18 PM
neelsomani

[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.
08-07-2010, 05:53 PM
mrhoo

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>
08-07-2010, 09:11 PM
neelsomani

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.
08-07-2010, 10:27 PM
mrhoo

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.
08-08-2010, 12:16 AM
neelsomani

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.
08-08-2010, 03:24 PM
Padonak

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">  </style> <script type="text/javascript">  </script> </head> <body> <div id="main"> <h1> Animation <span> </span></h1> <p><img src="http://www.webdeveloper.com/forum/images/statusicon/user_offline.gif" alt="image" /></p> </div> </body> </html>