How to change font colour on webpage with a button?

Question

I was wondering if somebody could tell me how I can change my font colour of my webpage when a person clicks a button.

I have the functionality for the background but it doesnt seem to work for the text.

Here is my code so far:

<div class="dropdown">
<button onclick="toggleBackgroundDropdown()" 
class="dropdownButton">Background</button>
<div id="backgroundDropdown" class="backgroundDropdown">
<a class="colorbutton">Red</a>
<a class="colorbutton">Yellow</a>
<a class="colorbutton">Blue</a>
<a class="colorbutton">White</a>
</div>

<button onclick="toggleTextColorDropdown()" class="dropdownButton">Text 
Color</button>
<div id="textColorDropdown" class="textColorDropdown">
<a class="textcolorbutton">Red</a>
<a class="textcolorbutton">Yellow</a>
<a class="textcolorbutton">Blue</a>
<a class="textcolorbutton">White</a>
</div>

</div>

<script>
function toggleBackgroundDropdown() 
{   
document.getElementById("backgroundDropdown").classList.toggle("show");
}

function toggleTextColorDropdown() 
{   
document.getElementById("textColorDropdown").classList.toggle("show");
}

function changeColor()
{
var x = event.clientX; 
var y = event.clientY;
var elementMouseIsOver = document.elementFromPoint(x, y);

document.body.style.backgroundColor = elementMouseIsOver.text;
}

function changeTextColor()
{
var x = event.clientX; 
var y = event.clientY;
var elementMouseIsOver = document.elementFromPoint(x, y);

var a = document.getElementById('a');
a.style.color = elementMouseIsOver.text;
}

window.onload = function(event)
{
var colorbuttons = document.getElementsByClassName("colorbutton");
for (var i = 0; i < colorbuttons.length; i++) 
{   
    colorbuttons[i].addEventListener('click', changeColor, false);
}

var textcolorbuttons = document.getElementsByClassName("textColorButton");
for (var i = 0; i < textcolorbuttons.length; i++) 
{   
    textcolorbuttons[i].addEventListener('click', changeTextColor, false);
}
}

window.onclick = function(event)
{
if (event.target.className == "colorbutton")
{
    toggleBackgroundDropdown();
}
else if (event.target.className == "textcolorbutton")
{
    toggleTextColorDropdown();
}
}
</script>

Answer 1

Give an unique id for buttons like backgroundChange for the button. Then use the following code

$("#backgroundChange").click(function(){
   if($(this).css('background-color')=='lightgrey')
         $(this).css('background-color', 'red');
   else {
         $(this).css('background-color', 'lightgrey);
   }
});

Similarly you can toggle the class

$("#backgroundChange").click(function () {
        $(this).toggleClass('backgroundDropdown');
});

Answer 2

There is no need jquery, two way to do this:

1. define two classname with diff color, call function to change class onCLick
   <p onclick="function(event){event.target.className = your new class"></p>
2. change your css style
   <p onclick="function(event){event.target.style.backgroundColor = 'read'}"></p>

Answer 3

The better approach is to add/change the class of an element, ie the body and do the styling via CSS. More flexible, more robust.

Answer 4

If you are trying to change the text color on the whole page and it can be an arbitrary color (you can use classes as suggested by others, but only with a very limited set of choices), for example picking it with an <input type=color> , you'll have some trouble using just document.body.style.color = something . Unless you've added color: inherit pretty much everywhere.

A more thorough (though somewhat clunky due to the API design) approach is to change the rule that applies color in your stylesheet, a single rule with a big selector can ensure that you affect every element you wanted to:

const theRuleIndex = // here's the hard part, find the correct rule
document.styleSheets[0].cssRules[theRuleIndex].style.color = yourColor