Lo que he estado tratando -sin éxito- de lograr es cambiar el color del fondo y el texto haciendo clic en un elemento <a> , rotando aleatoriamente entre varias combinaciones de colores.
Mis colores predeterminados son:
color: #1B1725; background-color: #A30B37;Me gustaría usar, al menos, tres combinaciones de colores más (por el bien de este ejemplo, esas otras tres combinaciones pueden ser colores básicos).
Editar para un mayor desarrollo:
Solo necesito un botón que cambie entre tres combinaciones de colores (no colores aleatorios).
Lo que he probado hasta ahora:
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"; } }Usando esto, cambia de los colores predeterminados a los colores "combo1". Necesitaría ese botón para seguir cambiando al hacer clic.
Puedes generar colores aleatorios como este:
// Generate random colors var bg = Math.floor(Math.random()*16777215).toString(16); var text = Math.floor(Math.random()*16777215).toString(16);O
// 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)];Finalmente
var div = document.getElementById('mydiv'); var a= document.getElementById('atagid'); a.onclick = function() { div.style.backgroundColor = "#"+bg; div.style.color= "#"+text; }Aquí hay un ejemplo de sandbox: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); }