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.

Answer 1

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.

Answer 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>