www.webdeveloper.com
Results 1 to 10 of 10

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

  1. #1
    Join Date
    Dec 2002
    Posts
    159

    Question 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.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,083
    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()
    }
    }

  3. #3
    Join Date
    Nov 2010
    Posts
    1,083
    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()
    	}
    }

  4. #4
    Join Date
    Dec 2002
    Posts
    159

    Question

    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 , 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!

    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.

  5. #5
    Join Date
    Dec 2002
    Posts
    159
    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.

  6. #6
    Join Date
    Dec 2002
    Posts
    159

    resolved Hiding/ showing elements

    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

    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>

  7. #7
    Join Date
    Nov 2010
    Posts
    1,083
    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>

  8. #8
    Join Date
    Dec 2002
    Posts
    159
    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

    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'))"

    ?

    Thanks.

  9. #9
    Join Date
    Nov 2010
    Posts
    1,083
    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>

  10. #10
    Join Date
    Dec 2002
    Posts
    159
    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!

    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 .

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles