CODEWITHSUNDEEP
javascripthtmlcss
Jman
Jman

Reputation: 27

On Click Color Changer

I am trying to make a color changer for background and font colors. It is working for the most part, but I am unable to figure out how to get the links and the h2/h3 tags to change with the rest of the text.

var div = document.getElementById('ColorChanger');
var allColors = [];
var currentColor = 0;

allColors.push({bg:"black",front:"#5DBF1B"});
allColors.push({bg:"#89a7e2",front:"black"});
allColors.push({bg:"black",front:"white"});
allColors.push({bg:"white",front:"black"});

div.addEventListener('click', function(e){
    var self = this,
        old_bg = this.style.background;

    document.body.style.background = allColors[currentColor].bg;
    document.body.style.color = allColors[currentColor].front;

   currentColor++;
if(currentColor == allColors.length) currentColor = 0;

})
<div id="ColorChanger"><img alt="Click to change color" class="ignore_menu_hide" src="/App_Themes/Site/assets/images/theme_icon.png" /></div>




							    <h2>Follow Us</h2>
<ul class="social_media"><li><a href="#" alt="Facebook Link">

Facebook</a></li>
<li><a href="#" alt="Twitter Link">

Twitter</a></li>
<li><a href="#" alt="">
RSS Feeds</a></li>
<li><a href="#">
YouTube</a></li>
<li><a href="#" alt="Linked In Link">
LinkedIn</a></li>
<li><a href="#" alt="Pinterest Link">
Pinterest</a></li>
<li><a href="#" alt="">

Instagram</a></li>
 </ul>


<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Upvotes: 0

Views: 85

Answers (1)

Adrian
Adrian

Reputation: 8597

Basically you need to grab those elements using document.getElementsByTagName("p")/ document.getElementsByTagName("h1") / document.getElementsByTagName("a") iterate them and apply the styling.

var div = document.getElementById('ColorChanger');
var allColors = [];
var currentColor = 0;

allColors.push({
    bg: "black",
    front: "#5DBF1B"
});
allColors.push({
    bg: "#89a7e2",
    front: "black"
});
allColors.push({
    bg: "black",
    front: "white"
});
allColors.push({
    bg: "white",
    front: "black"
});

div.addEventListener('click', function(e) {
    var self = this,
        old_bg = this.style.background;

    document.body.style.background = allColors[currentColor].bg;
    document.body.style.color = allColors[currentColor].front;

    var pElements = document.getElementsByTagName("p");
    var h2Elements = document.getElementsByTagName("h2");
    var aElements = document.getElementsByTagName("a");

    for (var i = 0; i < pElements.length; i++) {
        pElements[i].style.color = allColors[currentColor].front;
    }

    for (var i = 0; i < h2Elements.length; i++) {
        h2Elements[i].style.color = allColors[currentColor].front;
    }

    for (var i = 0; i < aElements.length; i++) {
        aElements[i].style.color = allColors[currentColor].front;
    }

    currentColor++;
    if (currentColor == allColors.length) currentColor = 0;

})

Upvotes: 2

Related Questions