CODEWITHSUNDEEP
javascriptjqueryhtmlfunctionhyperlink
HappyHands31
HappyHands31

Reputation: 4101

How To Get All Hyperlinks to Change Colors Upon Click?

enter image description here

Link to JSfiddle: http://jsfiddle.net/HappyHands31/LnbzgL14/

I am really close to getting this to work. Right now it's only half-way working. When I click "Adventure", for example, the body text changes to blue, but I need for all of the hyperlinks to change to blue also. Romantic is red, relaxation is green, family is brown. Do I need to put the colorLinks function inside of the change_color functions somehow? Let me know if I need to further clarify. Thank you!

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Castaway Vacations, LLC</title>
    </head>
    <body leftmargin=0 rightmargin=0 bgcolor=#ffcc99 text=#993300 link=#993300 vlink=#996633>
        <br>
        <table width=100% border=0 cellpadding=0 cellspacing=0>
            <tr>
                <td width=95% align="right" bgcolor=#ffffff>
                    <img src="castaway_logo.jpg">
                    <br>
                    <font face=arial>Vacations, LLC</font></td>
                <td bgcolor=#ffffff>&nbsp;</td>
            </tr>
        </table>
        <br>
        <br>
        <div align="center">
            <table width=600>
                <tr>
                    <td width=300 valign="top">
                        <font face=arial size=3><b><i>Select Mood...</i></b></font>
                        <br>
                        <br>
                        <font face=arial>
       <a style="text-decoration:none" id="one" href="#">Romantic</a>
       <br><br>
       <a style="text-decoration:none" id="two" href="#">Adventure</a>
       <br><br>
       <a style="text-decoration:none" id="three" href="#">Relaxation</a>
       <br><br>
       <a style="text-decoration:none" id="four" href="#">Family</a><br>
       <br><br>
       <br>
       <a style="text-decoration:none" id="reqBrochure" href="#">
       Request Brochure...</a>
       </font>
                    </td>
                    <td align="center"><img id="original.jpg" src="orig_main.jpg">
                        <br>
                        <i>Your Vacation Awaits!

      </tr>
      </center>
    <script src="castaway.js"></script>
    </body>
</html>
</DOCTYPE>

Javascript:

document.getElementById('one').addEventListener('click', change_color);
document.getElementById('two').addEventListener('click', change_color2);
document.getElementById('three').addEventListener('click', change_color3);
document.getElementById('four').addEventListener('click', change_color4);
document.getElementById('reqBrochure').addEventListener('click',
    openWindow);

function change_color() {
    document.body.style.color = "red";
    document.body.style.background = "purple";
    document.getElementById("original.jpg").src = "rom_main.jpg";
}

function change_color2() {
    document.body.style.color = "blue";
    document.body.style.background = "orange";
    document.getElementById("original.jpg").src = "adv_main.jpg";
}

function change_color3() {
    document.body.style.color = "green";
    document.body.style.background = "#47D1FF";
    document.getElementById("original.jpg").src = "rel_main.jpg";
}

function change_color4() {
    document.body.style.color = "brown";
    document.body.style.background = "black";
    document.getElementById("original.jpg").src = "fam_main.jpg";
}

colorLinks("red");

function colorLinks(color) {

    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        if (links[i].href) {
            links[i].style.color = color;
        }
    }
}

//pop-up form window;

var win; // makes variable global;
function openWindow() {
    win = window.open("form.html", "form", "width=400,height=350");
}

function closeWindow() {
    win.close();
    var openLink = document.getElementById('reqBrochure');
    openLink.innerHTML = "Request Submitted";
}

Ignore the script for pop-up form windows unless you think that has something to do with why it's not working. Thank you!

Upvotes: 3

Views: 107

Answers (3)

TrojanMorse
TrojanMorse

Reputation: 642

How about using something like this in your event handlers

//get a tags
var elements = document.querySelectorAll('a');

//iterate through each link on the page and change the color
[].slice.call(elements).forEach(function(elem) {
    elem.style.color = 'red'; //change this to the relevant color
});

What's happening here is that you call slice() as if it was a function of NodeList using call(). What slice() does in this case is create an empty array, then iterate through the object it's running on (originally an array, now a NodeList) and keep appending the elements of that object to the empty array it created, which is eventually returned.

JSFiddle - https://jsfiddle.net/ToreanJoel/u4of4ob2/

Upvotes: 1

Gregg Duncan
Gregg Duncan

Reputation: 2725

You are correct you need to call your colorLinks function inside each of your change_color functions like this: http://jsfiddle.net/LnbzgL14/2/

function change_color(){
    document.body.style.color = "red";
    document.body.style.background = "purple";
    document.getElementById("original.jpg").src = "rom_main.jpg";
    colorLinks("red");
}

Upvotes: 1

Blake
Blake

Reputation: 641

This will significantly change how you're doing this but you could just use different css files and then you jquery to swap between them on click like so:

$("one").click(function() { $("link[rel=stylesheet]").attr({href : "AdventureStyle.css"}); })

Then just put the specific colors, imgs and etc in the stylesheet.

Upvotes: 1

Related Questions