pass CSS .class as a parameter to javascript function

css, html, javascript

Solution

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

Problem

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

Original source