What I have been trying -unsuccessfully- to achieve is to change the colour of the background and the text by clicking one <a> element, randomly rotating amongst several colour combinations.
My default colours are:
color: #1B1725;
background-color: #A30B37;
I would like to use, at least, three colour combinations more (for the sake of this example, those three other combinations can be basic colours).
Edit for further development:
I need just one button that toggles between three colour combinations (not random colours).
What I have tried so far:
function changeColor(combo) {
if(combo=="combo1"){
document.body.style.backgroundColor = "#FEFAE0";
document.body.style.color = "red";
}else if(combo=="combo1"){
document.body.style.backgroundColor = "blue";
document.body.style.color = "white";
}
}
Using this, it changes from the default colours to the "combo1" colours. I would need that button to keep changing on click.
You can generate random colors like this:
// Generate random colors
var bg = Math.floor(Math.random()*16777215).toString(16);
var text = Math.floor(Math.random()*16777215).toString(16);
OR
// To generate predefined colors
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
var colors = ["000000","FEFEFE","FFFAAA"];
var bg = colors[getRandomInt(colors.length)];
var text = colors[getRandomInt(colors.length)];
Finally
var div = document.getElementById('mydiv');
var a= document.getElementById('atagid');
a.onclick = function() {
div.style.backgroundColor = "#"+bg;
div.style.color= "#"+text;
}
Here is sandbox example: https://codesandbox.io/s/currying-cherry-nt80k?file=/index.html
function getColorChange(){
var x = 1
var a = "black"
var intervalID = setInterval(function () {
document.getElementById("changeColor").style.backgroundColor = a;
if (x == 1) {
a = "green"
}
if (x == 2 ) {
a="red"
}
if (++x === 4) {
window.clearInterval(intervalID);
}
}, 5000);
}