Question

I was kindly helped by Jonathan over here simple javascript question-linking button state to image swap?

The problem is that this makes the “active” class the same class for both list items.

Each list item needs to toggle its own active and its own inactive class (each is a button with its own css styling and background image).

Can you please help me modify the script so that I can do that?

Here is Jonathans provided code:

<li class="transcript">
   <a id="transcriptionhorbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
   <a id="transcriptionvertbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>

<script>

var buttons = [ document.getElementById("transcriptionvertbutton"), 
                document.getElementById("transcriptionhorbutton")];

function make_active(el) {
  deactivate_buttons();
  el.setAttribute("class","active");
}

function deactivate_buttons() {
  buttons[0].setAttribute("class","inactive");
  buttons[1].setAttribute("class","inactive");
}
</script>

I understand that the problem is here:

function make_active(el) {
  deactivate_buttons();
  el.setAttribute("class","active");
}

but I don’t know enough to separate that into two different classes.

Answer 1

Just add an extra parameter to the function:

function make_active(el, classname) {
  deactivate_buttons();
  el.setAttribute("class",classname);
}

Then change your calls just a bit. Here is the completed code. Note I changed all calls of setAttribute to .className instead. This was just so you don’t run into any trouble with IE6:

<li class="transcript">
   <a id="transcriptionhorbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this,'active_class_1');"></a>
</li>
<li class="transcript">
   <a id="transcriptionvertbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this,'active_class_2');"></a>
</li>

<script>

var buttons = [ document.getElementById("transcriptionvertbutton"), 
                document.getElementById("transcriptionhorbutton")];

function make_active(el, classname) {
  deactivate_buttons();
  el.className = classname;
}

function deactivate_buttons() {
  buttons[0].className = "inactive_class_1";
  buttons[1].className = "inactive_class_2";
}
</script>