Changed the name attribute to id but not sure how to amend my JavaScript.

Hi there,

I've just changed the "name" attribute being used in a piece of working JavaScript to "id".

The script allows me to hide/show sections of text on a page...

var sections = new Array('beginners', 'higher')

function closeAll()
{
var i;
for (i=0; i<sections.length; i++) {
var obj = document.getElementById(sections[i]);
if (eval("typeof document.img"+sections[i])!='undefined') {
eval("document.img"+sections[i]+".src='images/'+'plus.png'");
obj.style.display = 'none';
}
}
}

function switchBlock(SWEET) {
var obj = document.getElementById(SWEET);
if (eval("typeof document.img"+SWEET)!='undefined') {
if(obj.style.display == 'none') {
eval("document.img"+SWEET+".src='images/'+'minus.png'");
obj.style.display = 'block';
}
else {
eval("document.img"+SWEET+".src='images/'+'plus.png'");
obj.style.display = 'none';
}
eval("document.img"+SWEET+".blur()");
}
}

function toFront(section)
{
document.all['beginners'].style.visibility='hidden';
document.all['higher'].style.visibility='hidden';


eval('document.all[\''+section+'\'].style.visibility="visible"')
}

On the actual html page, there's a piece of coding that goes like this...

<a href="JavaScript:switchBlock('higher')"><img src="images/plus.png" name="imghigher" width="18" height="18" /></a>

When I change it to...

<a href="JavaScript:switchBlock('higher')"><img src="images/plus.png" id="imghigher" width="18" height="18" /></a>

...the JavaScript does not work.

Can someone please tell me what I need to change in the JavaScript code.

Thank you.

hideous and ancient code.

I don't know what toFront is supposed to be doing, so I left that one alone...

Code:

---

function closeAll()
{
var i;
for (i=0; i<sections.length; i++) {
var obj = document.getElementById(sections[i]);
alert(document.getElementById("img"+sections[i]).src='images/plus.png')
if (document.getElementById("img"+sections[i])!='undefined') {
document.getElementById("img"+sections[i]).src='images/plus.png';
obj.style.display = 'none';
}
}
}

function switchBlock(SWEET) {
var obj = document.getElementById(SWEET);
var pic = document.getElementById("img"+SWEET);
if (pic!='undefined') {
if(obj.style.display == 'none') {
pic.src='images/minus.png';
obj.style.display = 'block';
}
else {
pic.src='images/plus.png';
obj.style.display = 'none';
}
pic.blur()
}
}

---

but there are many more improvements you could make. such as getting rid of the a tag and passing the image directly to the function...

Code:

---

<img src="images/plus.png" id="imghigher" width="18" height="18" onclick="switchBlock(this)"/>

function switchBlock(pic) {
var obj = document.getElementById(pic.id.substring(3));
if (pic!='undefined') {  //will this ever be undefined?
if(obj.style.display == 'none') {
pic.src='images/minus.png';
obj.style.display = 'block';
        }
else {
pic.src='images/plus.png';
obj.style.display = 'none';
}
pic.blur()
        }
}

---

Hi,

Thanks for your help :) - I used both changes you gave me and couldn't get it to work as it was working before. :(

With regard to "hideous and ancient code"...ha :D, yes, not surprising...since I took it from a website many a year ago - it still works so didn't bother looking to update it. However, the code on the page is not validating under "xhtml1-strict.dtd" because I'm using the "name" attribute. Having changed it to "id", the JavaScript no longer works.

As you can tell, I don't know JavaScript! :confused:

The way it worked before was that there were two sections that were hidden on a page when it opened up (the code you gave me had the sections open by default).

These sections were in the JavaScript code under....

var sections = new Array('hidden1', 'hidden2')

...and...

function toFront(section)
{
document.all['hidden1'].style.visibility='hidden';
document.all['hidden2'].style.visibility='hidden';


eval('document.all[\''+section+'\'].style.visibility="visible"')
}


On the actual html page, the hidden sections were opened by either clicking the image, "plus.png" or the text next to it (I didn't refer to the text link in my initial post). This is the code for the first hidden section called "hidden1"...

<a href="JavaScript:switchBlock('hidden1')"><img src="images/plus.png" name="imghidden1" width="18" height="18" alt="Clicking This Image Opens the Hidden Section 1" /></a>

<a class="SectionLink" href="JavaScript:switchBlock('hidden1')">This Link Opens the Hidden Section 1</a>

I hope that explains it all better.

Thanks for your time.

I probably don't need to explain this to you but to any novices like me reading this...I'd like to add that it is the same link that opens the hidden text and then closes it again.

Thanks.

Hi xelawho,

I did a little Google digging and got your better code to work the way I wanted it too...thanks. Sorry...I just needed a step by step explanation coz that's just how I am :o

I went with....

<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>

...to work with...

<a href="javascript:hideshow(document.getElementById('Hidden1'))"><img src="images/plus.png" width="18" height="18" alt="View Hidden Section 1" /></a>

<a href="javascript:hideshow(document.getElementById('Hidden1'))"> - View Hidden Section 1</a>

<div id="Hidden1" style="display: none;">
Hidden Info
</div>

Significantly less hideuos. Slightly less ancient. getElementById was introduced in 2000, so we can be fairly sure that most browsers can use it - there's no need to check for it, really. Also if you really want to use those a tags, calling javascript from the href is very old school. Here's an update:

Code:

---

<a href=#" onclick="hideshow('Hidden1'); return false"><img src="images/plus.png" width="18" height="18" alt="View Hidden Section 1" /></a>

<a href=#" onclick="hideshow('Hidden1'); return false"> - View Hidden Section 1</a>

<script type="text/javascript">
function hideshow(which){
el=document.getElementById(which);
if (el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
  }
}
</script>

---

Hi thanks once again.

"Also if you really want to use those a tags, calling javascript from the href is very old school."

It's not that I "really want to"...just only way I know how to :rolleyes:

Also, I've just noticed that href=#" fails to validate as XHTML 1.0 Strict!...and this whole thread started because that's what I was aiming for.

Should I just stick to my "Significantly less hideous" code that includes...

href="javascript:hideshow(document.getElementById('Hidden1'))"

? :D

Thanks.

ah. it should be href="#" (left out a " ). Dunno if that validates - I don't much care about html validation - but I suppose it would, it's a fairly standard approach.

Getting rid of the a tags is easy - you can even make text look like links with a little css, and just use their onclick events...

Code:

---

<head>
<style>
span{
color:blue;
text-decoration:underline;
cursor:pointer;
}
</style>
</head>
<body>
<img src="images/plus.png" width="18" height="18" alt="View Hidden Section 1" onclick="hideshow('Hidden1')"/>
<span onclick="hideshow('Hidden1')"> - View Hidden Section 1</span>

---

Removing the "a" tag didn't validate unfortunately but as it turns out...the whole hide/show function is being scraped - apparently it has been decided that the information is now going on to separate pages! :mad:

In any case, thanks for all your help - it's been duly noted :) The site where I took the initial "hideous and ancient code" is going to have a facelift - I'll be telling them what to use instead ;).