Change Link Colour Using Javascript

Question

So I created a webpage, and I have made my own light switch where it basically inverts colours, black goes to white and vice versa but I can't seem to get my links to change colour. I want my anchor tags as well as a:visited, a:link to all change to a different colour but can't get it to work.

HTML:

<nav>
    <h1>My Portfolio</h1>
    <ol>
        <li><a title="Link to My Cover Letter & CV" href="index.html">My Cover Letter & CV</a> | </li>
        <li><a title="Link to My Projects" href="">My Projects</a> | </li>
        <li><a title="Link to Temp" href="">Temp</a> | </li>
        <li><a title="Link to Temp" href="personalDev.html">Temp</a></li>
    </ol>
</nav> <!-- Closes Nav -->

CSS:

/*Links*/
a, a:link, a:visited {
    color: black;
    text-decoration: none;
    transition: 1s;
}

/*Link hovering*/
nav a:hover {
    text-decoration: none;
    border: solid 1px black;
    border-radius: 5px;
    padding: 10px;
}

Javascript:

    document.addEventListener ("DOMContentLoaded", handleDocumentLoad);
function handleDocumentLoad() {

    //Variable
    var offSwitch = document.getElementById("lightSwitchOff"); //Targets div with ID lightSwitchOff
    var onSwitch = document.getElementById("lightSwitchOn"); //Targets div with ID lightSwitchOn
    var border = document.getElementById("mainContent"); //Targets the mainContent
    offSwitch.innerHTML = "Turn On Night Mode";
    onSwitch.innerHTML = "Turn Off Night Mode";
    onSwitch.style.display = "none";

    //Event Listener
    offSwitch.addEventListener("click", lightsOff); //When clicked this action is performed
    onSwitch.addEventListener("click", lightsOn); //When clicked this action is performed

    //Function
    function lightsOff() { /*This changes the background colour to black and makes text white*/
        document.body.style.backgroundColor = "#000000";
        document.body.style.color = "#FFFFFF";
        border.style.borderColor = "#FFFFFF";
        onSwitch.innerHTML = "Turn Off Night Mode";
        onSwitch.style.display = "inline";
        offSwitch.style.display = "none";
    }

    function lightsOn() { /*This changes the background colour to a white and makes text black*/
        document.body.style.backgroundColor = "#FFFFFF";
        document.body.style.color = "#000000";
        border.style.borderColor = "#000000";
        offSwitch.innerHTML = "Turn On Night Mode";
        onSwitch.style.display = "none";
        offSwitch.style.display = "inline";
    }
}

Also I was wondering if there was a way to save the page state so for example the user presses the light switch, refreshes the page and it's still the same.

But you do not have elements with such id-s in your html. Am I missing something? And according to your comments you actually don't have any code working with anchor tags in js — Armen Vardanyan
– Armen Vardanyan, Commented Oct 30, 2017 at 19:11
It would be a way better idea to just set a class to the body or html element via JS and then change the colours via a stylesheet. For one it's using CSS for the styling instead of settin inline-styles via JS, it's more readable, and also you'll be able to set styles for the pseudo classes :hover, :focus, :active. Also, any dynamically added contents would automatically have the correct styles. — Sarah Groß
– Sarah Groß, Commented Oct 30, 2017 at 19:11
You might consider creating two css classes that define lights on and off and then add and remove theses classes to your elements. You can add a class to an element by document.getElementById("peace").className = "light-on". As for retaining on a page refresh then you should look into storing values in local storage: developer.mozilla.org/en-US/docs/Web/API/Window/localStorage — Dean
– Dean, Commented Oct 30, 2017 at 19:11
Hey there @Ryan , I'm not exactly sure how to tackle your issue. However, you can write hexadecimal shorthand for your colors to save some bytes (i.e. #000 = #000000, #FFF = #FFFFFF). — TCharb
– TCharb, Commented Oct 30, 2017 at 19:12
@ArmenVardanyan I didn't include all of my HTML but was showing how the rest of my switch works — Ryan
– Ryan, Commented Oct 30, 2017 at 19:26

score 2 · Accepted Answer · 2017-10-30 19:25:36Z

2

You could just use basic DOM style object?

<a id="link" href="#">this is a link</a>
<script>
    document.getElementById("link").style.color = "green";
</script>

Or if you could use jQuery?

<a id="link" href="#">this is a link</a>
<script>
    $( "a" ).css( {"color":"green"} );
</script>

edited Oct 30, 2017 at 19:25

answered Oct 30, 2017 at 19:19

user7838288

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

2 Comments

Ryan Over a year ago

Didn't work, I need to change multiple link colours, it only changes the first link colour if I tag them all with an id

user7838288 Over a year ago

@Ryan you should use the jQuery one since it targets all of the links and should work just fine... also i found out that i couldn't use DOM call to get all of the links at once using document.body.getElementsByTagName("a");

doubleOrt · Accepted Answer · 2017-10-31 22:59:54Z

document.addEventListener ("DOMContentLoaded", handleDocumentLoad);

function handleDocumentLoad() {

//Variable
var offSwitch = document.getElementById("lightSwitchOff"); //Targets div with ID lightSwitchOff
var onSwitch = document.getElementById("lightSwitchOn"); //Targets div with ID lightSwitchOn
var border = document.getElementById("mainContent"); //Targets the mainContent
offSwitch.innerHTML = "Turn On Night Mode";
onSwitch.innerHTML = "Turn Off Night Mode";
onSwitch.style.display = "none";

//Event Listener
offSwitch.addEventListener("click", lightsOff); //When clicked this action is performed
onSwitch.addEventListener("click", lightsOn); //When clicked this action is performed


var links = document.getElementsByClassName("links");


//Function
function lightsOff() { /*This changes the background colour to black and makes text white*/
document.body.className += " body_lights_off";
border.style.borderColor = "#FFFFFF";
onSwitch.innerHTML = "Turn Off Night Mode";
onSwitch.style.display = "inline";
offSwitch.style.display = "none";
var i;
for(i = 0; i < links.length; i++) {
links.item(i).className += " links_lights_off";
}
}

function lightsOn() { /*This changes the background colour to a white and makes text black*/
document.body.className = document.body.className.replace(" body_lights_off", "");
border.style.borderColor = "#000000";
offSwitch.innerHTML = "Turn On Night Mode";
onSwitch.style.display = "none";
offSwitch.style.display = "inline";
var i;
for(i = 0; i < links.length; i++) {
links.item(i).className = links.item(i).className.replace(" links_lights_off", "");
}
}


}

.body_lights_off {
background-color: #000000;
color: #ffffff;
}

/*Links*/
a, a:link, a:visited {
    color: black;
    text-decoration: none;
    transition: 1s;
}

/*Link hovering*/
nav a:hover {
    text-decoration: none;
    border: solid 1px black;
    border-radius: 5px;
    padding: 10px;
}

.links_lights_off:link, .links_lights_off:visited {
color: white;
}

<nav>
    <h1>My Portfolio</h1>
    <ol>
        <li><a class="links" title="Link to My Cover Letter & CV" href="index.html">My Cover Letter & CV</a> | </li>
        <li><a class="links" title="Link to My Projects" href="">My Projects</a> | </li>
        <li><a class="links" title="Link to Temp" href="">Temp</a> | </li>
        <li><a class="links" title="Link to Temp" href="personalDev.html">Temp</a></li>
    </ol>
</nav> <!-- Closes Nav -->

<button id="lightSwitchOn"></button>
<button id="lightSwitchOff"></button>

<div id="mainContent"></div>

You add a links class to each of the links, you then use document.getElementsByClassName in JS to get all these links-classed elements. In each of the 2 functions (lightsOff and lightsOn), you iterate through the links elements, accessing them using the syntax links.item([index]), and then you achieve the link-color changing effects via a links_lights_off class, which in the CSS, specifies that all the links with that class should have a white color, you add this class to each of the links in the lightsOff function, and you remove it from each link in the lightsOn function.

A class is used for document.body's background-color/color effects as well, same functionality as the links_lights_off class, add class in the lights_off function and remove it in the lights_on function.

There were tons of improvements I could make, but I felt like so much at once would confuse you, mayhaps I was wrong.

If you have any questions, feel free to ask. If this is not the effect you seek, inform me.

Collectives™ on Stack Overflow

Change Link Colour Using Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related