html - JavaScript get child element

Question

Why this does not work in firefox i try to select the category and then make subcategory visible.

<script type="text/javascript">
    function show_sub(cat) {
      var cat = document.getElementById("cat");
      var sub = cat.getElementsByName("sub");
      sub[0].style.display='inline'; 
}

</script>

-

<ul>
    <li id="cat" onclick="show_sub(this)">
        Top 1
        <ul style="display:none" name="sub">
            <li>Sub 1</li>
            <li>Sub 2</li>
            <li>Sub 3</li>
        </ul>
    </li>
    <li>Top 2</li>
    <li>Top 3</li>
    <li>Top 4</li>
</ul>

EDIT Answer is:

<script type="text/javascript">
   function show_sub(cat) {
      cat.getElementsByTagName("ul")[0].style.display = (cat.getElementsByTagName("ul")[0].style.display == "none") ? "inline" : "none";
   }
</script>

Answer 1

ULs don't have a name attribute, but you can reference the ul by tag name.

Try replacing line 3 in your script with this:

var sub = cat.getElementsByTagName("UL");