www.webdeveloper.com
Results 1 to 10 of 10

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

Hybrid View

  1. #1
    Join Date
    Dec 2002
    Posts
    163

    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,085
    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,085
    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
    163

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

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

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