pass CSS .class as a parameter to javascript function

Question

the goal here is onclick of 1.gif, everything with .panel1 class disappears(style.display.none), and everything with a .panel2 class becomes visable (style.display.inline)

I'm new at this..so I think its just a syntax issue with ' ' or maybe " "

<!DOCTYPE html>

<html>

<head>
    <title>main</title>
    <meta charset="utf-8">

    <style type="text/css">
    .panel1 {display:inline;}
    .panel2 {display:none;}
    </style>

    <script type="text/javascript">
    function panelTransition(panelOut,panelIn)
        {
        document.getElementByClass(panelIn).style.display="inline";
        document.getElementByClass(panelOut).style.display="none";
        }
    </script>
</head>

<body>
<img class="panel1" src=1.gif onclick="panelTransition(panel1,panel2)" />
<img class="panel2" src=2.gif />
</body>

</html>

I hope you don't mind asking me this: You are using basic HTML5 standards and no jQuery? =) Why? =) — benqus
– benqus, Commented May 18, 2012 at 19:45

voithos · Accepted Answer · 2012-05-18 19:46:08Z

5

There is no getElementByClass. It's getElementsByClassName, and it returns an array of items, so you'll need to modify your code to loop through them.

function panelTransition(panelOut, panelIn) {
    var inPanels = document.getElementsByClassName(panelIn);
    for (var i = 0; i < inPanels.length; i++) {
        inPanels[i].style.display = 'inline';
    }

    var outPanels = document.getElementsByClassName(panelOut);
    for (var i = 0; i < outPanels.length; i++) {
        outPanels[i].style.display = 'none';
    }
}

If you were using a JavaScript library, like jQuery, this would be much easier to do. Also, as has been mentioned, you need quotes around your arguments to panelTransition.

<img class="panel1" src=1.gif onclick="panelTransition('panel1', 'panel2')" />
<img class="panel2" src=2.gif />

edited May 18, 2012 at 19:46

answered May 18, 2012 at 19:34

voithos

70.9k12 gold badges107 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arjan Over a year ago

You might want to update your code so it no longer uses getElementByClass() but instead uses getElementByClassName()

3z33etm Over a year ago

this fixed it. thanks. here it is hosted 23.23.184.26/miller/transitiontest/transitiontest.html

3z33etm Over a year ago

here it is a little more elaborate 23.23.184.26/miller/transitiontest/main.html

Isaac Fife · Accepted Answer · 2012-05-18 19:30:48Z

0

<img class="panel1" src=1.gif onclick="panelTransition('panel1','panel2')" />

I think you need quotes there

answered May 18, 2012 at 19:30

Isaac Fife

1,69013 silver badges15 bronze badges

Comments

web_bod · Accepted Answer · 2012-05-18 19:50:05Z

0

<html>

<head>
    <title>main</title>
    <meta charset="utf-8">

    <style type="text/css">
    .panel1 {display:inline;}
    .panel2 {display:none;}
    </style>

    <script type="text/javascript">
    function panelTransition(panelOut,panelIn)
                {
                    // panelIn gets turned on
                    setDisplay(panelIn,"inline");

                    // panelOut gets turned off
                    setDisplay(panelOut,"none");
                }

                function setDisplay(className,displayState)
                {
                    // retrieve a list of all the matching elements
                    var list = document.getElementsByClassName(className);

                    // step through the list
                    for(i=0; i<list.length; i++) {
                        // for each element, set the display property
                        list[i].style.display = displayState;
                    }                        
                }
    </script>
</head>

<body>
<img class="panel1" src="1.gif" onclick="panelTransition('panel1','panel2')" />
<img class="panel2" src="2.gif" onclick="panelTransition('panel2','panel1')" />
</body>

</html>

Or you can accomplish the same in jQuery

// fires when the page is up and running
$(document).ready(function(){

     // find all the panel1 elements, 
     // attach an on click handler
     $(".panel1").bind("click", function(){ 

            // find all the panel1 elements
            // set their css display property to inline
            $(".panel1").css("display","inline"); 

            // find all the panel2 elements
            // set their css display property to none
            $(".panel2").css("display","none");
     });

     $(".panel2").bind("click", function(){ 
            $(".panel2").css("display","inline"); 
            $(".panel1").css("display","none");
     });
});

You can learn all about jQuery here : http://www.jquery.com/

You'll only be able to get your code to run once, as soon as you click a panel1 image all of the panel2 images will disappear, you won't be able to click them back on ever again.

edited May 18, 2012 at 19:50

answered May 18, 2012 at 19:30

web_bod

5,7681 gold badge19 silver badges25 bronze badges

2 Comments

voithos Over a year ago

At this point, I think it'd be better for him to learn about basic programming concepts, before diving into jQuery...

3z33etm Over a year ago

no...this is helpful. ive only been studying this for a few days and its already aparrent that jquery is where ill end up.

Collectives™ on Stack Overflow

pass CSS .class as a parameter to javascript function

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related