Can someone check this JS and tell me why it isn't quite working (almost)?

**Edouble** · 11-16-2004, 03:44 AM

I know very little about JavaScript but I found this snippit and I am trying to use it. I have 2 probelms - first, how to get all of the answers to be hidden on default (they currently display on default) and second how to make the view all work but in link form not checkbox (it is currently in checkbox form but does not work and I can't figure out why).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
                window.onload = onLoad;

                function onLoad()
                {
                    var sa = document.getElementById("chkViewAll");
                    if(typeof(IsPrinterFriendly) == "undefined") sa.checked = false;
                    else sa.checked = true;
                }

              

                function toggleQuestions(checked)
                {
                    var secCount = 5;
                    var faqEntryCount = 37;
                    for(var j=1; j<=secCount; j++)
                    {
                        for (var i=1; i<=faqEntryCount; i++)
                        {
	                        var title = document.getElementById("title" + j + i);
                            if(checked == true)
                                expandQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
                            else
                                collapseQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
                        }
                    }
                    if(checked == false)
                    {
                      var sa = document.getElementById("chkViewAll");
	                    sa.checked = false;
                    }
                }

                function toggleQuestion(tName, qName, aName)
                {
                    var title = document.getElementById(tName);
                    if (title == null) return;
                    var ans = document.getElementById(aName);
                    if (ans == null) return;
                    var que = document.getElementById(qName);
                    if (ans.style.display == '')
                    {
                      if (que != null) que.style.display = 'none';


	                    ans.style.display = 'none';
	                    var sa = document.getElementById("chkViewAll");
	                    sa.checked = false;
                    }
                    else
                    {
                        if (que != null) que.style.display = '';
	                    ans.style.display = '';
                    }
                }

                function expandQuestion(tName, qName, aName)
                {
                    var title = document.getElementById(tName);
                    if (title == null) return;
                    var ans = document.getElementById(aName);
                    if (ans == null) return;
                    var que = document.getElementById(qName);
                    if (que != null) que.style.display = '';
                    ans.style.display = '';
                }

                function collapseQuestion(tName, qName, aName)
                {
                    var title = document.getElementById(tName);
                    if (title == null) return;
                    var ans = document.getElementById(aName);
                    if (ans == null) return;
                    var que = document.getElementById(qName);
                    if (que != null) que.style.display = 'none';
                    ans.style.display = 'none';
                }
</script>
</head>
<body>
<script language="Javascript">
      document.write('<div id="selectAll" style="margin-top:10px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="right"><input id="chkViewAll" type="checkbox" onclick="toggleAll()"></td><td class="selectAll">View all answers</td></tr></table></div>');
    </script>	
<div id="title10" class="body"><a href="javascript:toggleQuestion('title10', 'question10', 'answer10')">Question 1?</a></div>
<div id="answer10" class="body">Answer 1.</div>
<div id="title11" class="body"><a href="javascript:toggleQuestion('title11', 'question11', 'answer11')">Question 2?</a></div>
<div id="answer11" class="body">Answer 2.</div>
<div id="title12" class="body"><a href="javascript:toggleQuestion('title12', 'question12', 'answer12')">Question 3?</a></div>
<div id="answer12" class="body">Answer 3</div>	
</body>
</html>

Thanks in advance for any help!

**Nate_Bro** · 11-16-2004, 05:43 AM

well i see the prob with the check box.

<input id="chkViewAll" type="checkbox" onclick="toggleAll()">

you call the function toggleAll() but there is no toggleAll() function, so thats why that is not working

ummm.... i'm looking over the rest of it right now, hope i can help you out, i'm new at JS too, lol

**Edouble** · 11-16-2004, 05:56 AM

doh! I'm obviously an idiot. Here goes another shot:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
                window.onload = onLoad;

                function onLoad()
                {
                    var sa = document.getElementById("chkViewAll");
                    if(typeof(IsPrinterFriendly) == "undefined") sa.checked = false;
                    else sa.checked = true;
                }

                function toggleAll()
                {
                    var sa = document.getElementById("chkViewAll");
                    var ch = sa.checked;
                    toggleQuestions(ch);
                }
              
                function toggleQuestions(checked)
                {
                    var secCount = 5;
                    var faqEntryCount = 37;
                    for(var j=1; j<=secCount; j++)
                    {
                        for (var i=1; i<=faqEntryCount; i++)
                        {
	                        var title = document.getElementById("title" + j + i);
                            if(checked == true)
                                expandQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
                            else
                                collapseQuestion("title" + j + i, "question" + j +i, "answer" + j + i);
                        }
                    }
                    if(checked == false)
                    {
                      var sa = document.getElementById("chkViewAll");
	                    sa.checked = false;
                    }
                }

                function toggleQuestion(tName, qName, aName)
                {
                    var title = document.getElementById(tName);
                    if (title == null) return;
                    var ans = document.getElementById(aName);
                    if (ans == null) return;
                    var que = document.getElementById(qName);
                    if (ans.style.display == '')
                    {
                      if (que != null) que.style.display = 'none';


	                    ans.style.display = 'none';
	                    var sa = document.getElementById("chkViewAll");
	                    sa.checked = false;
                    }
                    else
                    {
                        if (que != null) que.style.display = '';
	                    ans.style.display = '';
                    }
                }

                function expandQuestion(tName, qName, aName)
                {
                    var title = document.getElementById(tName);
                    if (title == null) return;
                    var ans = document.getElementById(aName);
                    if (ans == null) return;
                    var que = document.getElementById(qName);
                    if (que != null) que.style.display = '';
                    ans.style.display = '';
                }

                function collapseQuestion(tName, qName, aName)
                {
                    var title = document.getElementById(tName);
                    if (title == null) return;
                    var ans = document.getElementById(aName);
                    if (ans == null) return;
                    var que = document.getElementById(qName);
                    if (que != null) que.style.display = 'none';
                    ans.style.display = 'none';
                }
</script>
</head>
<body>
<script language="Javascript">
      document.write('<div id="selectAll" style="margin-top:10px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="right"><input id="chkViewAll" type="checkbox" onclick="toggleAll()"></td><td class="selectAll">View all answers</td></tr></table></div>');
    </script>	
<div id="title11" class="body"><a href="javascript:toggleQuestion('title11', 'question11', 'answer11')">Question 1?</a></div>
<div id="answer11" class="body">Answer 1.</div>
<div id="title12" class="body"><a href="javascript:toggleQuestion('title12', 'question12', 'answer12')">Question 2?</a></div>
<div id="answer12" class="body">Answer 2.</div>		
<div id="title13" class="body"><a href="javascript:toggleQuestion('title13', 'question13', 'answer13')">Question 3?</a></div>
<div id="answer13" class="body">Answer 3</div>		
</body>
</html>

Any thoughts on how to get the answers to hide on default, and how to change the check box to a link that toggles the show all? My attempts have failed...

**Nate_Bro** · 11-16-2004, 06:06 AM

lol, its ok

ok now that works

i'm still looking over and seeing how they made it, but i think i'm close on it, or maybe not at all, who knows!
i'm new at javascript also

**Nate_Bro** · 11-16-2004, 06:06 AM

hmmm... so you only want a link? like a text link?

**Nate_Bro** · 11-16-2004, 06:15 AM

hmmm... i see what you mean

the whole script is based on the check box, i tried a text link, and its all opposite now, it hides all instead of show all

**Nate_Bro** · 11-16-2004, 06:21 AM

well so far all i can see if you put the toggleAll() in the body like so

<BODY OnLoad="toggleAll()">

it hides them all, but, i'm still working on it

**Edouble** · 11-16-2004, 02:52 PM

It hides them all on default?

**Nate_Bro** · 11-16-2004, 03:43 PM

yes, if you run the script that hides them when the page loads, it hides them.

it works just as if you clicked on the check box, but it hides the answers when the page loads, instead of on default, but i'm still working on that one

**Edouble** · 11-16-2004, 04:32 PM

Right you are! Thanks for figuring that out (I couldn't!).

Now I am just trying to figure out how to get this into an anchor tag (stripping out all the table stuff but making it a text link that does the same thing as the check box does).

Code:

<script language="Javascript">
      document.write('<div id="selectAll" style="margin-top:10px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="right"><input id="chkViewAll" type="checkbox" onclick="toggleAll()"></td><td class="selectAll">View all answers</td></tr></table></div>');
</script>

Thread: Can someone check this JS and tell me why it isn't quite working (almost)?

Thread Tools

Search Thread

Can someone check this JS and tell me why it isn't quite working (almost)?

Bookmarks

Bookmarks

Posting Permissions