CODEWITHSUNDEEP
javascripthtmlcssinput
user967211
user967211

Reputation: 69

How to change the class of an anchor class when clicked with the mouse?

This is my website. http://www.sarahjanetrading.com/js/j/index.html All the code+images+css is there with access to anyone

I want the "listen" anchor class button to change(toggle) into the "stop listening" anchor class button when I(or someone else) clicks on it(onclick). All the CSS and HTML is done, I just want a script which can toggle the anchor classes when the mouse clicks on them.

I am searching(googling) this for a while, with no luck whatsoever. And would really very much appreciate any help in the matter. Thanks Alot ! :)

Upvotes: 0

Views: 1747

Answers (4)

user278064
user278064

Reputation: 10180

var aButtons = document.getElementsByTagName('a'),   // Retrieve all the buttons
    max, 
    i;

for (i = 0, max = aButtons.length; i < max; i += 1) {
    (function() {
       var bttn = aButtons[i];
       // Handle the user click
   .   bttn.onclick = function() {

       // If this is  listen button, change it in a 'stop-listening button'
       if (bttn.className.indexOf('listen') !== -1) {
          bttn.className = 'stop-listening button';          
       } else {
         bttn.className = 'listen button';  // else change it in a 'listen button'
       }
    })();
}

Upvotes: 0

Bala
Bala

Reputation: 691

do it using jQuery which makes life easier and takes care of cross browser issue. Include the jquery library in your HTML page and give the below function which will take care of your requirement.

$(function(){
    $("a.button").click(function(){
        which = $(this);
        if($(which).hasClass("listen")){
            $(which)
                    .text("custom text") // edited for changing text
            .removeClass("listen")
            .addClass("stop-listening");
        }
        else if($(which).hasClass("stop-listening")){
            $(which)
                    .text("custom text") // edited for changing text
            .removeClass("stop-listening")
            .addClass("listen");
        }
    })
})

Upvotes: 0

adeneo
adeneo

Reputation: 318302

You just need to change the classes from listen to stop-listening etc. Something like this:

$(".listen, .stop").click(function() {
  if ($(this).hasClass("listen")) {
      $(this).removeClass("listen").addClass("stop");
  } else {
      $(this).removeClass("stop").addClass("listen");
  }
});

Upvotes: 1

dotslashlu
dotslashlu

Reputation: 3401

I can't understand your question well, if you mean 'how to toggle class when clicking the anchor' here's your answer:

function changeClass(elem, cls1,cls2)
{
    elem.className = (elem.className == cls1)?cls2:cls1;
}

By the way, good job on CSS, but still need to work a lot on scripts ;)

Upvotes: 0

Related Questions