javascript function help please.

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post August 27th, 2003, 6:36 pm

Hello, here I am attempting javascript, and guess what, it doesn't work!!! :-D 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 :):
Code: [ Select ]
<html>
<head>
<script language="JavaScript">
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>
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. var c = 1;
  5. function displayText(idName, timeOut, msgs)
  6. {
  7.     idName-c.style.visibility="visible";
  8.     c++;
  9.     if (c <= msgs)
  10.     {
  11.         var redo = setTimeout("displayText()", timeOut);
  12.     }
  13. }
  14. </script>
  15. <title>
  16. Adult-Swim Type Text Display
  17. </title>
  18. </head>
  19. <body bgcolor="#ffffff" text="#000000" onLoad="displayText('msg', '2000', '3')">
  20. <h1 name="msg-1" id="msg-1" style="visibility: hidden">Message 1</h1>
  21. <h1 name="msg-1" id="msg-2" style="visibility: hidden">Message 2</h1>
  22. <h1 name="msg-1" id="msg-3" style="visibility: hidden">Message 3</h1>
  23. </body>
  24. </html>

working example: http://bheyer.acgcny.com/adswim.html

thanks in advance.

edit: I also tried replacing the '-' with '.'
Pixel Acres V2
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 27th, 2003, 6:36 pm

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post August 27th, 2003, 8:39 pm

In your function on your actual page you have:

Code: [ Select ]
function displayText('idName', timeOut, msgs)


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

Code: [ Select ]
function displayText(idName, timeOut, msgs)
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post August 27th, 2003, 8:42 pm

hrm no then it tries to parse msg as a variable :(
Pixel Acres V2
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post August 27th, 2003, 9:57 pm

msgs is a variable isn't it ?
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post August 28th, 2003, 12:01 am

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.

Code: [ Select ]
<html>
<head>
<script language="JavaScript">
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>
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. var c = 1;
  5. function displayText(idName, timeOut, msgs)
  6. {
  7.     //store the idName preface 'msg' in a local var so idName won't be modified
  8.     id=idName;
  9.     id+=c;
  10.     document.getElementById(id).style.visibility="visible";
  11.     c++;
  12.     if (c <= msgs)
  13.     {
  14.         setTimeout("displayText('"+idName+"', "+timeOut+", "+msgs+")", timeOut);
  15.     }
  16. }
  17. </script>
  18. <title>
  19. Adult-Swim Type Text Display
  20. </title>
  21. </head>
  22. <body bgcolor="#ffffff" text="#000000" onLoad="displayText('msg', 2000, 3)">
  23. <h1 name="msg1" id="msg1" style="visibility: hidden">Message 1</h1>
  24. <h1 name="msg2" id="msg2" style="visibility: hidden">Message 2</h1>
  25. <h1 name="msg3" id="msg3" style="visibility: hidden">Message 3</h1>
  26. </body>
  27. </html>
Free Programming Resources
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post August 28th, 2003, 7:49 am

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

*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)
Code: [ Select ]
document.getElementById(id).style.visibility="visible";
Pixel Acres V2
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post August 28th, 2003, 10:25 am

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:
Code: [ Select ]
document.getElementById(id).style.visibility="visible";

with:
Code: [ Select ]
myHeader = document.getElementById(id);    
myHeader.style.visibility="visible";
  1. myHeader = document.getElementById(id);    
  2. 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:

Code: [ Select ]
document.myForm.myText.value="";

or this way:
Code: [ Select ]
tf = document.myForm.myText;
tf.value="";
  1. tf = document.myForm.myText;
  2. 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).
Free Programming Resources
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Joined: Jun 15, 2003
  • Posts: 4583
  • Loc: Maryland
  • Status: Offline

Post August 28th, 2003, 10:40 am

*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!
Pixel Acres V2
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post August 28th, 2003, 12:01 pm

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 :)
Free Programming Resources
  • stinger
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jan 22, 2004
  • Posts: 157
  • Loc: San Jose, CA
  • Status: Offline

Post January 29th, 2004, 2:38 am

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.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 115 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.