www.webdeveloper.com
Results 1 to 9 of 9

Thread: i need to make this script smaller and more efficient.

  1. #1
    Join Date
    Dec 2011
    Posts
    2

    i need to make this script smaller and more efficient.

    iv got a problem i need to make this script smaller.

    but first here is what I am trying to do.
    I am trying to change multiple div and span tags with one button. the script iv got works but i need to make it smaller so its easier to add on to and change.
    please do bare in mind im no programming master so please keep it relatively simple.

    here is the JavaScript code:

    <script language="javascript" type="text/javascript">
    function changeCssClassnav(objDivID)
    {
    if(document.getElementById(objDivID).className=='nav')
    {
    document.getElementById(objDivID).className = 'nav2';
    }
    else
    {
    document.getElementById(objDivID).className = 'nav';
    }
    }

    function changeCssClassmain(objDivID)
    {
    if(document.getElementById(objDivID).className=='main')
    {
    document.getElementById(objDivID).className = 'main2';
    }
    else
    {
    document.getElementById(objDivID).className = 'main';
    }
    }

    function changeCssClasssideright(objDivID)
    {
    if(document.getElementById(objDivID).className=='sideright')
    {
    document.getElementById(objDivID).className = 'sideright2';
    }
    else
    {
    document.getElementById(objDivID).className = 'sideright';
    }
    }

    function changeCssClasssideleft(objDivID)
    {
    if(document.getElementById(objDivID).className=='sideleft')
    {
    document.getElementById(objDivID).className = 'sideleft2';
    }
    else
    {
    document.getElementById(objDivID).className = 'sideleft';
    }
    }

    function changeCssClassheading(objDivID)
    {
    if(document.getElementById(objDivID).className=='heading')
    {
    document.getElementById(objDivID).className = 'heading2';
    }
    else
    {
    document.getElementById(objDivID).className = 'heading';
    }
    }

    function changeCssClassh1main(objDivID)
    {
    if(document.getElementById(objDivID).className=='h1main')
    {
    document.getElementById(objDivID).className = 'h1main2';
    }
    else
    {
    document.getElementById(objDivID).className = 'h1main';
    }
    }

    function changeCssClassh2main(objDivID)
    {
    if(document.getElementById(objDivID).className=='h2main')
    {
    document.getElementById(objDivID).className = 'h2main2';
    }
    else
    {
    document.getElementById(objDivID).className = 'h2main';
    }
    }

    function changeCssClassh3main(objDivID)
    {
    if(document.getElementById(objDivID).className=='h3main')
    {
    document.getElementById(objDivID).className = 'h3main2';
    }
    else
    {
    document.getElementById(objDivID).className = 'h3main';
    }
    }
    </script>

    and here is the html:

    <input type="button"
    value="click here"
    onclick="changeCssClassnav('nav'),
    changeCssClassmain('main'),
    changeCssClasssideright('sideright'),
    changeCssClasssideleft('sideleft'),
    changeCssClassheading('heading'),
    changeCssClassh1main('h1main'),
    changeCssClassh2main('h2main'),
    changeCssClassh3main('h3main')" />

    any help will be much appreciated.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435

    Lightbulb Something to try ...

    Following is untested because you neither included the CSS info nor the elements effected in the <body> section.
    Code:
    <html>
    <head>
    
    <script language="javascript" type="text/javascript">
    
    function changeCssClass(objDivID) {
      var sel = document.getElementById(objDivID).className;
      sel = (sel == objDivID) ? objDivID+'2' : objDivID;
    }
    
    </script>
    </head>
    <body>
    
    <input type="button"
    value="click here"
    onclick="changeCssClass('nav');
      changeCssClass('main');
      changeCssClass('sideright');
      changeCssClass('sideleft');
      changeCssClass('heading');
      changeCssClass('h1main');
      changeCssClass('h2main');
      changeCssClass('h3main')" /> 
    </body>
    </html>

  3. #3
    Join Date
    Dec 2011
    Posts
    2

    And/or

    Is there an and/or function for "if" statements in java script. If so what is it?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435

    Lightbulb

    Quote Originally Posted by mavricar View Post
    Is there an and/or function for "if" statements in java script. If so what is it?
    Yes. Look up logical operators & and | as well as && and ||.
    But why? There is no need for it in your first post if my post works.

    What was the results of post #2 I provided.
    Did it work or not?

  5. #5
    Join Date
    Mar 2011
    Posts
    65
    Quote Originally Posted by mavricar View Post
    ... the script iv got works but i need to make it smaller so its easier to add on to and change.
    With this, all you'll need to change is the values of the element id's in classNamesA for the elements whose class names you want to change. If the element exists, then a '2' is appended to the id and assigned to the class for the element
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var classNamesA = ['nav','main','sideright','sideleft']; //edit class names to suit
                function changeClassNames(){
                    for(i=0; i < classNamesA.length; i++){
                        if(document.getElementById(classNamesA[i])){
                            document.getElementById(classNamesA[i]).className = classNamesA[i]+'2';
                        }
                    }
                }
            </script>
        </head>
        <body>
            <div>
                <button onclick="changeClassNames();">Change class names</button>
            </div>
        </body>
    </html>

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435

    Arrow

    Quote Originally Posted by webdev1958 View Post
    With this, all you'll need to change is the values of the element id's in classNamesA for the elements whose class names you want to change. If the element exists, then a '2' is appended to the id and assigned to the class for the element
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var classNamesA = ['nav','main','sideright','sideleft']; //edit class names to suit
                function changeClassNames(){
                    for(i=0; i < classNamesA.length; i++){
                        if(document.getElementById(classNamesA[i])){
                            document.getElementById(classNamesA[i]).className = classNamesA[i]+'2';
                        }
                    }
                }
            </script>
        </head>
        <body>
            <div>
                <button onclick="changeClassNames();">Change class names</button>
            </div>
        </body>
    </html>
    Which is the same thing I recommended way back in post #2.

  7. #7
    Join Date
    Mar 2011
    Posts
    65
    but you did it by calling the function for each element ID, which imo is a "poor man's" way of doing things. If I submitted the way you did it in a class assignment it would have been marked down

    Imo it's better just to call the function once and then loop through the element ID's in an array and process them accordingly

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435

    Arrow

    The goal of 'mavricar's original request was to make the script smaller.
    I reduced it to two lines of code.

    I used his initialization code with the ID and Classname values assumed to be equal
    because he did not provide all of the code for testing.
    It does check all the ID's listed in the onclick setting, which you would need to
    edit your array a bit more to get all of the elements.

    I would have created a collection of the elements and avoided the ID value altogether.
    But that was not a choice as mavicar's code was incomplete.

    I'll let him decide which is easier to use and manage, should he/she ever return to comment.

  9. #9
    Join Date
    Mar 2011
    Posts
    65
    Quote Originally Posted by JMRKER View Post
    The goal of 'mavricar's original request was to make the script smaller.....
    yep agree, and I made it smaller by not having to call the function for every single element ID

    I was mainly highlighting the point that what I posted is not the same as what you posted as you claimed.

    The op can decide for them self how they want to do it.

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