Javascript: Altering Link Color

Question

Javascript: Altering Link Color

After creating my own webpage with a unique light switch that inverts colors, I encountered an issue with changing the color of my links. Despite setting the anchor tags to transition to a different color, it just wouldn't work.

Here is the HTML code snippet:

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

The CSS styling for the links:

/*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;
}

As for JavaScript functionality:

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

    var offSwitch = document.getElementById("lightSwitchOff"); 
    var onSwitch = document.getElementById("lightSwitchOn"); 
    var border = document.getElementById("mainContent"); 
    offSwitch.innerHTML = "Turn On Night Mode";
    onSwitch.innerHTML = "Turn Off Night Mode";
    onSwitch.style.display = "none";

    offSwitch.addEventListener("click", lightsOff); 
    onSwitch.addEventListener("click", lightsOn); 

    function lightsOff() { 
        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() { 
        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";
    }
}

Additionally, I am curious about preserving the page state so that if a user toggles the light switch and refreshes the page, it remains in the same mode.

javascript html css

Answer 1

Answer №1

Why not apply styles directly to the DOM elements?

<button id="btn" type="button">Click me</button>
<script>
    document.getElementById("btn").style.backgroundColor = "blue";
</script>

Alternatively, you could achieve the same with jQuery:

<button id="btn" type="button">Click me</button>
<script>
    $( "button" ).css( {"background-color":"blue"} );
</script>

Answer 2

Why not apply styles directly to the DOM elements?

<button id="btn" type="button">Click me</button>
<script>
    document.getElementById("btn").style.backgroundColor = "blue";
</script>

Alternatively, you could achieve the same with jQuery:

<button id="btn" type="button">Click me</button>
<script>
    $( "button" ).css( {"background-color":"blue"} );
</script>

Answer 3

Answer №2

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 assign a class named links to each link, then use document.getElementsByClassName to select all elements with that class in JavaScript. Within the functions lightsOff and lightsOn, you loop through the links elements using links.item([index]) syntax, applying effects by adding or removing the links_lights_off class defined in CSS for changing link colors.

A similar approach is used for changing the background color and text color of document.body with the body_lights_off class. This class is added in the lightsOff function and removed in the lightsOn function to achieve the desired effect.

While there are potential enhancements possible, introducing too many at once could lead to confusion. Feel free to ask if you have any questions or if you're looking for a different outcome.

If you need further clarification or modifications, don't hesitate to reach out. Thank you!

Answer 4

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 assign a class named links to each link, then use document.getElementsByClassName to select all elements with that class in JavaScript. Within the functions lightsOff and lightsOn, you loop through the links elements using links.item([index]) syntax, applying effects by adding or removing the links_lights_off class defined in CSS for changing link colors.

A similar approach is used for changing the background color and text color of document.body with the body_lights_off class. This class is added in the lightsOff function and removed in the lightsOn function to achieve the desired effect.

While there are potential enhancements possible, introducing too many at once could lead to confusion. Feel free to ask if you have any questions or if you're looking for a different outcome.

If you need further clarification or modifications, don't hesitate to reach out. Thank you!

Javascript: Altering Link Color

Answer №1

Answer №2

Similar questions

Group in group, glitch in outdated browser

What is the best way to manage a group of checkboxes using EJS?

Issue with AJAX not receiving successful response after function invocation

GSAP also brings scale transformations to life through its animation capabilities

What is the best way to include an uncomplicated HTML Element alongside a touch of JavaScript?

when successful, refresh the page

What is the priority of the asset pipeline's execution order?

Issues with Google Fonts failing to load correctly

What is the best way to ensure that a <label> remains vertically aligned with its <form>?

Is there a way to create an internal link to another HTML templating engine page within Express.js?

Field for text input enclosed within the <select> tag

Creating redux reducers that rely on the state of other reducers

Trouble encountered in PHP: Generating a file from POST data and initiating download prompt for the user not functioning as intended

What is the appropriate semantic to apply to the members of a search result list?

Having trouble adding an image link to the navbar using bootstrap?

Ensuring that an object attribute is assigned to $watch in AngularJS to activate triggering

Exploring MessageEmbed Properties

Guide on how to show every property of each object in an array

How can I display a button (hyperlink) on a new line using CSS or jQuery?

The functionality of Bootstrap's push and pull options appears to be malfunctioning