Using Prototype Framework with "Hide" and "Show" functions

JavaScript
1

Dear all,
I’m learning how to use Javascripts and using Prototype framework by following a step by step tutorial from a book. Unfortunately when I stepping through the following code:


<html>
    <head>
        <title>
            Listing 5-3: Hiding or showing boxes using
            document.getElementsByClassName()
        </title>
        <script type="text/javascript" src="/js/prototype.js"></script>
        <style type="text/css">
            .box {
                width : 300px; text-align : center;
                background : #f60; color : #fff;
                margin : 10px; font-weight : bold;
            }
            .box h1 { margin : 0; }
        </style>
    </head>
    <body>
        <div>
            <input type="button" value="Hide All" onclick="hideAll()" />
            <input type="button" value="Show All" onclick="showAll()" />
        </div>

        <div id="box-container">
            <div class="box">
                <h1>Box 1</h1>
            </div>
            <div class="box">
                <h1>Box 2</h1>
            </div>
        </div>

        <script type="text/javascript">
            function hideAll()
            {
                // find all 'box' elements and hide them
                document.getElementsByClassName('box', 'box-container').each(
                    function(s) {
                        s.hide();
                    }
                );
            }

            function showAll()
            {
                // find all 'box' elements and show them
                document.getElementsByClassName('box', 'box-container').each(
                    function(s) {
                        s.show();
                    }
                );
            }
        </script>
    </body>
</html>

it fails on the following statement:


document.getElementsByClassName('box', 'box-container').each(
                    function(s) {
                        s.hide();
                    }
                );

Firedebugger, which I’m using, complained and saying that:

document.getElementsByClassName(“box”, “box-container”).each is not a function

Anybody can give me a suggestion what the problem might be? The prototype file can be acquired at Prototype website download (I cannot post a link since this is my first post).

Regards,
ethereal1m

2

i don’t know if it’s just me but i’m fairly sure that

getElementsByClassName

doesn’t exist(although i did some searching and apparently it does only in firefox 3)

3

That function is provided by the Prototype framework he’s using

4

oh ok ignore everything i just said then

5

There’s a good solution to that, where you can create your own compatibility version of getElementsByClassName until other browsers catch up with things.
Getting elements by class name

6

As document.getElementsByClassName “should” work when Prototype is loaded, it seems apparant that Prorotype is not loaded.

Have you checked that it’s loaded? That the script file for it is loading into the web browser?

7

yes, the prototype is loaded, I checked with different hide function that works:


function hideAll() {
		// find all 'box' elements
		var elts = document.getElementsByClassName('box', 'box-container');
		
		// now loop over them and hide them
		for (i = 0; i < elts.length; i++)
			elts[i].hide();
	}

The above code works. Thus, I’m not sure about how I use “each”. Any other ideas?
thanks

8

If all else fails, you could read the documentation.
http://www.prototypejs.org/api/element/getElementsByClassName

As of Prototype 1.6, document.getElementsByClassName has been deprecated since native implementations return a NodeList rather than an Array. Please use $$ or Element#select instead.

9

ahh… ok, thanks for the tips

10

so simple, the correct code would be:


function hideAll() {
		// find all 'box' elements and hide them
		$('box-container').hide();
	}

    function showAll() {
		$('box-container').show();
    }

:slight_smile:

11

you can also use $$ but it returns an array so you need to iterate with each.


	            function hideAll()
	            {
	                // find all 'box' elements and hide them
	                $$('.box').each(
	                    function(s) {
	                        s.hide();
	                    }
	                );
	            }
12

hey, thanks for the input