Text to appear after timeout seconds with Javascript

BH

b_heyer

10 1
Created
Updated
Viewed
6.8k times

Hello, here I am attempting JavaScript, and guess what, it doesn't work!!! 😁 So of course I try to fix it, but I can't find the problem because of my lack of experience, so maybe one of you could help 🙂 :

<html>
<head>
<script>
var c = 1;
function displayText(idName, timeOut, msgs)
{
    idName-c.style.visibility="visible";
    c++;
    if (c <= msgs) {
        var redo = setTimeout("displayText()", timeOut);
    }
}
</script>
<title>
Adult-Swim Type Text Display
</title>
</head>
<body bgcolor="#ffffff" text="#000000" onLoad="displayText('msg', '2000', '3')">
<h1 name="msg-1" id="msg-1" style="visibility: hidden">Message 1</h1>
<h1 name="msg-1" id="msg-2" style="visibility: hidden">Message 2</h1>
<h1 name="msg-1" id="msg-3" style="visibility: hidden">Message 3</h1>
</body>
</html>

I also tried replacing the '-' with '.'

add a comment
0

4 Replies

  • Votes
  • Oldest
  • Latest
BW

Brian Wozeniak

4.9k 49
Replied
Updated

In your function on your actual page you have:

function displayText('idName', timeOut, msgs)

I think it shouldn't have the single quotes around idName, it should be:

function displayText(idName, timeOut, msgs)
  • 0
    hrm no then it tries to parse msg as a variable 😟 — b_heyer
  • 0
    msgs is a variable isn't it ? — Brian Wozeniak
add a comment
0
RB

RichB

5 0
Replied
Updated

I think this will give the effect you're going for. The syntax is a bit tortured, but it works, and I'm not sure if there's a neater way of writing it.

<html>
<head>
<script>
var c = 1;

function displayText(idName, timeOut, msgs)
{
	//store the idName preface 'msg' in a local var so idName won't be modified
	id=idName;
	id+=c;
	document.getElementById(id).style.visibility="visible";
	c++;
	if (c <= msgs)
	{
		setTimeout("displayText('"+idName+"', "+timeOut+", "+msgs+")", timeOut);
	}
}
</script>
<title>
Adult-Swim Type Text Display
</title>
</head>
<body bgcolor="#ffffff" text="#000000" onLoad="displayText('msg', 2000, 3)">
<h1 name="msg1" id="msg1" style="visibility: hidden">Message 1</h1>
<h1 name="msg2" id="msg2" style="visibility: hidden">Message 2</h1>
<h1 name="msg3" id="msg3" style="visibility: hidden">Message 3</h1>
</body>
</html>
add a comment
0
BH

b_heyer

10 1
Replied
Updated

Ah now I see what I left out of the setTimeout function, I'll learn one of these days!!! 😛

copy and pasting now

Thanks so much RichB worked great!

could you please explain this line though? (I'll search google after I post, but sometimes an in context explination helps me learn better)

document.getElementById(id).style.visibility="visible";
add a comment
0
RB

RichB

5 0
Replied
Updated

I should warn you that I'm a java programmer by training and that this explanation represents my best understanding of using JavaScript to access the DOM. I have a lot of experience with Object-Oriented Programming, but I have no formal training in JavaScript. With that caveat in mind...

When used client-side with web browsers, JavaScript can be thought of as a language that "exposes the functionality of the browser." This means that the browser's internal model of a webpage document can be accessed and manipulated by the web programmer using an interface known as the Document Object Model.

The DOM is a W3C specification for accessing the content of HTML documents. To manipulate something like an image or a header we need to have a way to refer to the element (an object reference), so we can access its properties like styles. getElementById is a method - basically a function - that returns an object reference to the element whose id is specified. We can then use the object reference to set the element's properties directly.

To make the process easier to see you can replace the line:

document.getElementById(id).style.visibility="visible";

with:

myHeader = document.getElementById(id);	 
myHeader.style.visibility="visible";

In the first version, we use the object reference immediately to set a property of the element to which it refers, and we don't bother to save it in a variable. In the second version the object reference is stored in the variable myHeader and then we can use that as if it were the object (element) itself, so if we wanted to set multiple properties we could store the return value of getElementById and we would basically have a "handle" for the element in question that we could use to access and manipulate it.

getElementById is only one way of doing this. For instance, elements can be referred to by name instead of id. If we had a form named "myForm" that contained a text field named "myText" we could clear the text inside the field by using:

document.myForm.myText.value="";

or this way:

tf = document.myForm.myText;
tf.value="";

Here, the text field is an object contained within the form object which is in turn contained in the document object, so I can access it through the DOM by referring to it as document.myForm.myText, and value is a property of the text field, so once I have a way of referring to the text field element I can use it to set the value property directly or store the reference in a variable and use it later (or even pass it to another function and work on it somewhere else).

  • 0
    tear you didn't have to write all of that for me! But thanks it made me understand a lot better then anything I found in google. I now see what you did much more clearly! Thanks again! — b_heyer
  • 0
    Hehe, I figured you already knew about DOM, but I usually go by the rule "better too much info than too little," so I tend to throw in the kitchen sink and sometimes the bathroom sink and the tub for good measure 🙂 — RichB
  • 0
    RichB - I wanted to thank you on the refresh course in JavaScript. I usually access my forms through using the document.formName.button.value but your expressed version makes much more sense to me now. Your helping a lot of people out like myself. — stinger
add a comment
0