[RESOLVED] Repeating Text Problem

**neelsomani** · 08-07-2010 04:18 PM

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.

**mrhoo** · 08-07-2010 05:53 PM

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>

**neelsomani** · 08-07-2010 09:11 PM

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.

**mrhoo** · 08-07-2010 10:27 PM

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.

**neelsomani** · 08-08-2010 12:16 AM

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.

**Padonak** · 08-08-2010 03:24 PM

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>

Thread: [RESOLVED] Repeating Text Problem

Thread Tools

Display

[RESOLVED] Repeating Text Problem

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions