Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is this proper JavaScript

    I'm still new to JavaScript, but I managed to waste an hour making this code to change the class of the <div> from hidden to visible to hidden again with the click of a link. I want to know if this JavaScript is in good practice. If there is a better way to do this, by all means, let me know.

    Code:
    // The JavaScript
    
    function toggleMyDiv() {
        if(myDiv.className == "hidden") {
            myDiv.className = "visible";
            myLink.className = "active";
        } else {
            myDiv.className = "hidden";
            myLink.className = "inactive";
        }
    }
    
    // The HTML
    
    <p id="myLink" class="inactive"><a href="#" onclick="toggleMyDiv()"></a></p>
    <div id="myDiv" class="hidden">
        <p>Some content...</p>
    </div>
    I have a feeling there is probably a better way to do this. At first, I attempted to write some JavaScript that would turn <div id="visible"> into <div id="hidden">, but I failed and had to resort to classes. If someone could help me out in that area of changing the ID of the link and the DIV instead of classes, it would be nice.

  • #2
    New Coder
    Join Date
    Dec 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That will work just fine. Of course you can make it more compact (there are many ways to do that) but it isnt necessary.

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok. I'm not sure if JavaScript is like HTML in the sense that standards are good to follow. Like in HTML, your web page doesn't need the <html>, <head> or <body> tags to display properly in some browsers, but it's not exactly a good idea to not follow the standards.

    I know it's possible, but I can't figure it out... How do I simply change the ID's instead of the classes? I would imagine you'd need two or more functions to do so, but I'm curious. This would be the HTML relating to this question.

    Code:
    <p id="inactive"><a href="#" onclick="toggleMyDiv()">Toggle</a></p>
    <div id="hidden">
        <p>Some content...</p>
    </div>
    The resulting JavaScipt would change simply the ID's instead of the classes.

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Before I try to answer, why do you want to change the Id of a html tag?

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You don't need to change the id or class to be able to hide or unhide something. What you need to do is to change its display type.
    <p id="inactive"><a href="#" onclick="toggleMyDiv('h1')">Toggle</a></p>
    <div id="h1">
    <p>Some content...</p>
    </div>

    function toggleMyDiv(id) {
    d = document.getElementById(id).style;
    d.display = (d.display == 'none')? 'block':'none';
    }
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by felgall
    You don't need to change the id or class to be able to hide or unhide something. What you need to do is to change its display type.
    <p id="inactive"><a href="#" onclick="toggleMyDiv('h1')">Toggle</a></p>
    <div id="h1">
    <p>Some content...</p>
    </div>

    function toggleMyDiv(id) {
    d = document.getElementById(id).style;
    d.display = (d.display == 'none')? 'block':'none';
    }
    For a one-off like this, I previously would have used js to directly set style properties of an element. However, I've recently come round to the über-purist mindset about this sort of simple task and would now probably use the same js structure to set a class/className rather than specifically re/set a style property.

    e.g.

    css
    Code:
    .show {
    display: block;
    }
    
    .hide {
    display: none;
    }
    js
    Code:
    function toggleMyDiv(id) {
    
    	d = document.getElementById(id);
    	d.className = (d.className == 'show' || !d.className) ? 'hide' : 'show' ;
    
    }
    markup
    Code:
    <div id="myDiv">
        <p>Some content...</p>
    </div>
    Some may see it as overkill to add two additional classes to their CSS files for the sake of a single element/task, but I (now) appreciate that it's in keeping with the ideal of separation of content, structure, presentation and behaviour/scripting.
    By using js to get/set an element's class/className, you're still using CSS to handle presentation, so the actual presentational aspects of that task can be kept where they should be, in the CSS with all the rest; rather than intermingled with your js.


    Anyhoo, just something to consider, perhaps.

  • #7
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I agree with "Bill Posters". I was just wondering why the original poster "roxii" wanted to change the "id" of a HTML element. Just in case he some reason other than trying to change the visible of element block.

    Now I have a question. Can you have CSS set for say all div tags then have some class rules that you would use by class name inside of the div tags? I think yes. Now these small class rules could be change in a javascript function and only change the one property defined by the class rule of that name. So in fact you could have a function that would change the class-name a number of times and changing only one property at a time. Those properties would stay the same unless you change the class name to one that addressed that property. I think I will play around with this ideal for awhile and maybe post the results later in a new message thread.

  • #8
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I played around with my ideal and found I was wrong.

    If you change the className several times only the last one will apply. All the other attributes will revert back to default or if they were define by tag element (div for example) in the css section. So if you used a className for the orginal html element tag and later you want to make a change to a different className be sure to include all the atributes from the orginal className that you might want to keep plus the one you want to change

  • #9
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Similar to what Photojoe was trying to express... className actually holds several space-delineated values. Thus I could have class="class1 class2 class3"
    in my html and the element would follow all 3 classes. Therefore, if you are just resetting the className in js to some different value, you will also be getting rid of all of the other classes. Thus its better to selectively change the className property for the particular class that you want to toggle:
    Code:
    toggleClass(objectToChange, oldValue, newValue)
    {
      objectToChange.className=objectToChange.className.replace(new RegExp(oldValue), newValue);
    }
    (you may also want to add a word-boundary into the regular expression so that "detail" and "nodetail" can be differentiated from each other..
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!


  •  

    Posting Permissions

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