CODEWITHSUNDEEP
javascripthtmlcss
Storm3y
Storm3y

Reputation: 121

Javascript OnClick change various element link colour

I'm looking to change the link of the other link when they are clicked. So example if user clicks A-Z it would change the colour of 0-9.

<a href="" id="list_users_title" onclick="document.getElementById('oneline a').style.color = '#414042'; document.getElementById('list_users_title a').style.color = '#B91200';">A-Z</a>
<a href="" id="oneline" onclick="document.getElementById('oneline a').style.color = '#B91200'; document.getElementById('list_users_title a').style.color = '#414042';">0-9</a>

I can do it with the colour however this overrides the a:hover which I still would like to use.

Any help would be appreciated

Upvotes: 0

Views: 978

Answers (2)

sczizzo
sczizzo

Reputation: 3196

When you use getElementById you should be passing in the id of the element you want. So do something like this document.getElementById('oneline') instead of document.getElementById('oneline a').

EDIT

If you don't want to override the styles, use the onclick event to add a class (say, "clicked-by-oneline") to the element instead of applying styles directly. Then use stylesheets to define some rules like this: 

#oneline.clicked-by-oneline { color: #414042; }
#list_users_title.clicked-by-oneline { color: #B91200; }

Use cascading to control exactly how these style overrides will interact.

Upvotes: 0

Ash
Ash

Reputation: 3581

your problem is that by the help of javascript your are adding inline css to the a tag. Inline css has more priority than the one in style tag.

Here the solution-

<div id='style'></div>

<a href="" id="list_users_title" onclick="document.getElementById('style').innerHTML = '<style>ADD CSS HERE</style>';">A-Z</a>

this will not add inline css

Upvotes: 1

Related Questions