Home/ Questions/Q 6470335
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:05:56+00:00

I have a page that has a few links that I would like to

  • 0

I have a page that has a few links that I would like to be able to toggle with two buttons. It works with one link, using getElementById, but I need to toggle a few groups of them. I started with this, but it failed to work. I heard that getElementByClass worked with everything but IE, but I’m using Opera 11.5 and it still wont work. I’ve done a little searching, but I’m somewhat new to javascript and don’t understand most of the explanations. Can someone help me with a simple alternative, or help me fix a problem I’ve made?
This is a test page that I was using.

<head>
<script type="text/javascript">
function hideNames()
{
document.getElementByClass("webname").style.display="none";
}
function showNames()
{
document.getElementByClass("webname").style.display="inline";
}
</script>
</head>
<body>
<p class="webname">Webname</p>
<p class="webname">test</p>
<input type="button" onclick="hideNames()" value="Hide Web Names" />
<input type="button" onclick="showNames()" value="Show Web Names" />
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to fix your code to use the proper function name and to process the return result from that function as an array. It should work fine except in very old browsers that don’t have getElementsByClassName (which is all versions of IE until IE9). There are substitutes that can be used instead that aren’t as efficient, but work by filtering through all tags in the document.

    If you only want a single element, then use document.getElementById("idvalue") and operate on an id instead of a class name. getElementById is widely supported even in old browsers.

    Here’s how your code could work using class names:

    <head>
<script type="text/javascript">
function hideNames()
{
    var list = document.getElementsByClassName("webname");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display="none";
    }
}

function showNames()
{
    var list = document.getElementsByClassName("webname");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display="block";
    }
}

</script>
</head>
<body>
<p class="webname">Webname</p>
<p class="webname">test</p>
<input type="button" onclick="hideNames()" value="Hide Web Names" />
<input type="button" onclick="showNames()" value="Show Web Names" />
</body>

    P.S. <p> tags are display: block, not display: inline.

    For older browsers, the best thing to do is to use a pre-built selector engine that will solve all cross-browser issues for you. I’ve used YUI, jQuery and Sizzle (Sizzle is the selector engine inside YUI and jQuery). All are free and very good.

    You can also just get some code for your own implementation of getElementsByClassName if you have to stay native javascript. Here are some sources: http://ejohn.org/blog/getelementsbyclassname-speed-comparison/ and http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/.

    To show you how simple all this is with jQuery, here’s the entire code for that: http://jsfiddle.net/jfriend00/qP3XZ/.

    The HTML is this:

    <p class="webname">Webname</p>
<p class="webname">test</p>
<input id="hide" type="button" value="Hide Web Names" />
<input id="show" type="button" value="Show Web Names" />

    The code is this:

    $(document).ready(function() {
    $("#hide").click(function() {
        $(".webname").hide();
    });

    $("#show").click(function() {
        $(".webname").show();
    });
});
    • 0