CODEWITHSUNDEEP
javascripthtmlcss
Steven
Steven

Reputation: 401

Javascript: on click change button text color

Hey I have the below javascript code with accompanying HTML. I am trying to get each button when clicked to change the text color to blue and then when the next button is clicked it changes text of the previously clicked button back to green. basically only the most recently clicked button has blue text. I have tried this code but with this it changes all button text to blue on the first button click. Any help is appreciated. Javascript, HTML, and CSS below.

function swapIphoneImage( tmpIPhoneImage ) {
    var el = document.getElementById('my-link');
    var el1 = document.getElementById('my-link1');
    var el2 = document.getElementById('my-link2');
    var el3 = document.getElementById('my-link3');
    var el4 = document.getElementById('my-link4');

    var iphoneImage = document.getElementById('iphoneImage');
    iphoneImage.src = tmpIPhoneImage;
    el.className = 'clicked-class';
    el1.className = 'clicked-class1';
    el2.className = 'clicked-class2';
    el3.className = 'clicked-class3';
    el4.className = 'clicked-class4';

}

html

<ul class="features">
    <li><a id="my-link"  href="javascript:swapIphoneImage('wscalendarws.png');" title="">HaPPPs Calendar</a></li>
    <li><a id="my-link1"  href="javascript:swapIphoneImage('wsweekendws.png');" title="">Weekend Events</a></li>
    <li><a id="my-link2"  href="javascript:swapIphoneImage('wsfollowingws.png');" title="">Places & People</a></li>
    <li><a id="my-link3"  href="javascript:swapIphoneImage('wstemplateviewws.png');" title="">Customize Events</a></li>
    <li><a id="my-link4"  href="javascript:swapIphoneImage('wscheckinws.png');" title="">Interaction</a></li>
</ul>

css

a#my-link.clicked-class {
    color: #71a1ff !important;
}
a#my-link1.clicked-class1 {
    color: #71a1ff !important;
}
a#my-link2.clicked-class2 {
    color: #71a1ff !important;
}
a#my-link3.clicked-class3 {
    color: #71a1ff !important;
}
a#my-link4.clicked-class4 {
    color: #71a1ff !important;
}

Where am I failing?

Upvotes: 1

Views: 2062

Answers (3)

Ryan Erickson
Ryan Erickson

Reputation: 731

Try using JavaScript to change the classes then you only need one class to determine which one is clicked.

Here is an example:

JS:

   $("UL.features LI A").click(function(){
      $("UL.features LI A").removeClass('clicked');
      $(this).addClass('clicked');
   });

CSS:

A.clicked {
    color:#71a1ff !important;
}

Here it is in jsfiddle: http://jsfiddle.net/57PBm/

EDIT: This solution uses JQuery which will I would definitely suggest using if you are not already

Upvotes: 2

tomis
tomis

Reputation: 1971

Rewrite JS code to:

function swapIphoneImage( elThis, tmpIPhoneImage ) {
    var el = document.getElementByClassName('clicked-class');

    var iphoneImage = document.getElementById('iphoneImage');
    iphoneImage.src = tmpIPhoneImage;

    el.className = '';
    elThis.className = 'clicked-class';
}

and each button to:

<li><a id="my-link" href="javascript:swapIphoneImage(this, 'wscalendarws.png');" title="">HaPPPs Calendar</a></li>

You don't need to set up 5 CSS classes for the same thing.

Upvotes: 1

ameed
ameed

Reputation: 1170

You are changing every element to a clicked class. Just pass in a number to the function that identifies which button to color blue, then color that one blue and all the others green via JS.

Upvotes: 0

Related Questions