Databases
StackOverflow2013
Postsdbo
POChanging Color When Clicked
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging Color When Clicked
    text
    copied!<p>I wanted to change the color of a hyperlink when it's clicked. </p> <p>I used the following code and it worked:</p> <pre><code>var current = "home"; function home() { current = "home"; update2(); } function comp() { current = "comp"; update2(); } function team() { current = "team"; update2(); } function cars() { current = "cars"; update2(); } function spons() { current = "spons"; update2(); } function update2() { if (current == "home"){ document.getElementById('home').style.cssText='color:#FFE006;font-size:20pt;text- shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;'; document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;'; } else if (current == "comp"){ document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('comp').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;'; document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;'; } else if (current == "team"){ document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('team').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;'; document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;'; } else if (current == "cars"){ document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('cars').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;'; document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;'; } else if (current == "spons"){ document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;'; document.getElementById('spons').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;'; } } </code></pre> <p>Actually, it worked but a problem arose. As you can see, that I tried to change the properties such as color, size and text shadow when <code>current</code> is set to <code>home/spons/cars/team/comp</code>. <code>current</code> changes when a function is called when a user clicks on a hyperlink. </p> <p>A problem appears as I told it to do the same properties when it is <code>:hover</code>. Once a button is clicked, its properties are changed, and so are the other hyperlinks, to white color and 18 pt size. </p> <p>Now, once the user clicks on a hyperlink, it changes the source of a frame, its own properties and other hyperlinks' properties. But once I click it and then hover onto another hyperlink, the properties of hovering don't work but the properties of the javascript work.</p> <p>If you can't understand my problem then take look at <a href="http://www.xphoenix1.hpage.com/" rel="nofollow">http://www.xphoenix1.hpage.com/</a> . Once one menu button is clicked, it changes other buttons properties too and stop the hover properties.</p> <p>If you are able to understand what I'm saying and have a solution to it, then please answer.</p> <p>Thank You in advance</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload