javascript function help please.

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

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 '.'
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9099
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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)
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

hrm no then it tries to parse msg as a variable :(
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9099
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

msgs is a variable isn't it ?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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>
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

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";
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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).
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

*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!
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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 :)
  • stinger
  • Graduate
  • Graduate
  • stinger
  • Posts: 157
  • Loc: San Jose, CA

Post 3+ Months Ago

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 72 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.