Javascript Problem! Not changing the css style

Question

I have this code in JavaScript:

function change() {

        document.getElementById("mem").className = 'gif';

}

The fig and gif are like this:

a.fig {

background: #FFFFFF;

}

a.gif {

background: #000099  ;
}

and the function is used like this

<a class ="fig" id ="mem" onClick="javascript:change()" href="users" >

Where the only difference between gif and fig in CSS is that they have different background colors. The problem is that the change is only noticeable in just a second and it is not permanent!

Any ideas?

How change() is called? Are you aware the if statement is meaningless? — user447356
– user447356, Commented Feb 9, 2011 at 13:59
You're setting the same class ('gif') for both if statement possibilities. — djdd87
– djdd87, Commented Feb 9, 2011 at 14:00
I'm confused... both if and else set the className to gif? Why have if-else then? — limc
– limc, Commented Feb 9, 2011 at 14:01
Just add return false: onClick="change(); return false;" the thing is that without it, the class is changed then the page is redirected. — user447356
– user447356, Commented Feb 9, 2011 at 14:21

Šime Vidas · Accepted Answer · 2011-02-09 14:14:42Z

4

HTML:

<a id="mem" class="fig" href="users"> MEMBERS </a>

JavaScript:

var a = document.getElementById('mem');

a.onclick = function() {
    this.className = this.className == 'fig' ? 'gif' : 'fig';
}

Live demo: http://jsfiddle.net/eVQjB/

Note: in the demo, I return false; from the click handler to prevent the anchor from being activated.

edited Feb 9, 2011 at 14:14

answered Feb 9, 2011 at 14:08

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Houde · Accepted Answer · 2011-02-09 14:04:51Z

1

function change() {
var mem = document.getElementById("mem");
    if (mem.className == 'fig') {
        mem.className = 'gif';
    }
    else {
        mem.className = 'fig';
    }
}

answered Feb 9, 2011 at 14:04

David Houde

4,7881 gold badge22 silver badges29 bronze badges

Comments

Jonathan Leffler · Accepted Answer · 2012-05-07 02:39:04Z

1

You may be looking for a different problem with JavaScript and styles, but if I understand your problem, you'll still need a different color for the anchor if it has been visited. You can let CSS do that for you:

#mem {
  background: #FFF;
}

#mem:visited {
  background: #009;
}

<a id="mem" href="users">Lead me to the promised land!</a>

edited May 7, 2012 at 2:39

Jonathan Leffler

759k145 gold badges961 silver badges1.3k bronze badges

answered May 6, 2012 at 8:13

bytetron

112 bronze badges

Comments

Ankur · Accepted Answer · 2011-02-09 14:01:49Z

0

you can try by following way

document.getElementById("idElement").setAttribute("class", "className");

IF still not working you r class is not chaning the style of your html element

answered Feb 9, 2011 at 14:01

Ankur

1118 bronze badges

Comments

score 0 · Accepted Answer · 2011-02-09 16:33:40Z

0

Just add return false:

onClick="change(); return false;"

The thing is that without it, the class is changed then the page is redirected as this is the default behavior of anchor tag.

If you want to reload the page and change the class in the reloaded page, have such link:

href="?change=true"

Then in the server side code check for this flag and if true put different class. I'm not familiar with PHP but here is classic ASP version, hopefully similar enough to PHP:

<%
Dim sClassName
If Request("change")="true" Then
   sClassName = "gif"
Else  
   sClassName = "fig"
End If
%>
<a class ="<%=sClassName%>" id ="mem" href="?change=true">

edited Feb 9, 2011 at 16:33

answered Feb 9, 2011 at 15:23

user447356

3 Comments

mathew Over a year ago

Well it does work just fine.. But it apparently does not follow the link because of the return false statement.. But i need both the color to be changed and the link to be folowed.. Is there a way to achieve that?

user447356 Over a year ago

@mat so what you really need is different approach: have the link send flag over the URL then if the flag exists, put different class. Do you have server side language at your disposal? Another way is using AJAX.

mathew Over a year ago

Yes i work mainly in PHP.. But i dont really understand what you mean. Can you explain me a little more please? Sorry for being a pain in the ass...

Collectives™ on Stack Overflow

Javascript Problem! Not changing the css style

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related