CODEWITHSUNDEEP
javascripthtmlcss
happy_fist
happy_fist

Reputation: 171

JavaScript changing IDs won't work

I can't seem to use the function changeTab(num) to change the ID of a li element from number to selected, and to revert selected tab's ID to its default number. It only works one or two times and then stops. My goal is to mimic the change of selected and unselected tab, like for example in Chrome tabs.

<ul id="nav">
                    <li onClick="changeTab(1);" id="1"><a  href="#">Nav 1</a></li>
                    <li onClick="changeTab(2);" id="2"><a  href="#">Nav 2</a></li>
                    <li onClick="changeTab(3);" id="selected"><a href="#">Nav 3</a></li>
                    <li onClick="changeTab(4);" id="4"><a  href="#">Nav 4</a></li>
</ul>

My JavaScript code is:

function changeTab(num){

    switch(num){
        case 1:
            document.getElementById("selected").id = "1";
            break;
        case 2:
            document.getElementById("selected").id = "2";
            break;
        case 3:
            document.getElementById("selected").id = "3";
            break;
        case 4:
            document.getElementById("selected").id = "4";
            break;
        default:
            document.getElementById("selected").color = "";
    }


    //
    document.getElementById(num).id = "selected";

Upvotes: 0

Views: 537

Answers (1)

Stuart Wakefield
Stuart Wakefield

Reputation: 6414

EDIT as WTK suggested (as a comment in your question above) for this to be valid HTML, id values must start with a letter and not a number... I've updated my answer to be valid HTML by prepending the id with nav-...

<ul id="nav">
    <li onclick="changeTab(this);" id="nav-1"><a  href="#">Nav 1</a></li>
    <li onclick="changeTab(this);" id="nav-2"><a  href="#">Nav 2</a></li>
    <li onclick="changeTab(this);" id="selected"><a href="#">Nav 3</a></li>
    <li onclick="changeTab(this);" id="nav-4"><a  href="#">Nav 4</a></li>
</ul>

Using the this variable within the onclick handler will get the element being clicked... Then you can use the following function as the handler...

function changeTab(el) {
  // This function is passed 'el' from the onclick handler of the li. The
  // onclick handler passes 'this' through as the 'el' argument. 'el' will 
  // be a HTMLElement object. 

  // We only want to do something if the 'el' HTMLElement object does not
  // currently have the 'id' "selected", otherwise we do nothing.
  if(el.id != "selected") {
    // Revert all tabs to their original ids

    // Try and find the HTMLElement with the id "nav". The variable 'nav'
    // will be another HTMLElement object, this time representing the ul element.
    var nav = document.getElementById("nav");

    // The function 'getElementsByTagName' always returns a 
    // HTMLElementCollection, it might have zero elements if there were no
    // matches. We can use it as an array (although there are things to
    // take into consideration that affect performance). The 
    // HTMLElementCollection will contain all li elements that are 
    // descendants of the 'nav' ul element
    var lis = nav.getElementsByTagName("li");

    // Here we do a for-loop to iterate through the element collection
    // each item in the HTMLElementCollection will be a HTMLElement
    // representing one of the li elements
    for(var i = 0; i < lis.length; ++i) { // Arrays are zero-indexed

      // We set the id to nav-n overwriting whatever was there previously
      lis[i].id = "nav-" + (i + 1); // Our tabs are one-indexed
    }

    // Set the id for the original HTMLElement that was passed into the
    // function to "selected", we do this step last as one of the li HTMLElements
    // we change in the for-loop above will also be this HTMLElement
    el.id = "selected";
  }
}

There are other, possibly better, ways to do this. This should solve the problem though, if you wanted to delve deeper I would recommend the book Pro JavaScript Design Patterns.

Upvotes: 2

Related Questions