El primer problema es que no te funciona el cambio de color random por que tienes declarada una variable con el mismo nombre que la función color
, esto se arregla cambiado el nombre de una de ellas.
Entendiendo tu función cambiar()
veo que estas haciendo que sea una función pseudo-recursiva infinita, por lo que en vez de encenderse y apagarse estará parpadeando. Ademas de que primero se apaga y después se enciende, que es justo lo contrario a lo que buscas.
Se puede simplificar mucho simplemente cambiando el color a amarillo en el click y volviendo a dejar el "computed style" tras 2 segundos.
function cambiar() {
document.getElementById("divchangecolor").style.background="yellow";
setTimeout(function(){
document.getElementById("divchangecolor").style.background="";
},2000);
}
Snippet:
var color=false;
function cambiar() {
document.getElementById("divchangecolor").style.background="yellow";
setTimeout(function(){
document.getElementById("divchangecolor").style.background="";
},2000);
}
function myNumber(maxNumber) {
var random_number = Math.random();
var random_integer = random_number * maxNumber;
var my_integer = Math.floor(random_integer);
return my_integer;
}
var color1=false;
function colorFunc(){
color1 = !color1;
document.getElementById("divchangecolor").style.background = 'rgb(' + myNumber(255) + ',' + myNumber(255) + ',' + myNumber(255) + ')';
}
<div id="divchangecolor" >
div que cambia de color, se enciende 2 segundos y se apaga.
</div>
<button class="conten" onclick="cambiar()">encender</button>
<button class="color" onclick="colorFunc()"> cambiar el de color</button>
Y como posible mejora igual te interesa guardar el color para que cuando se vuelva a encender no se pierda...
Snippet que guarda el color tras apagar:
var color=false;
var randomColor="";
function cambiar() {
document.getElementById("divchangecolor").style.background="yellow";
setTimeout(function(){
randomColor != "" ? document.getElementById("divchangecolor").style.background =randomColor : document.getElementById("divchangecolor").style.background ="";
},2000);
}
function myNumber(maxNumber) {
var random_number = Math.random();
var random_integer = random_number * maxNumber;
var my_integer = Math.floor(random_integer);
return my_integer;
}
var color1=false;
function colorFunc(){
color1 = !color1;
randomColor = "rgb("+myNumber(255)+","+myNumber(255)+","+myNumber(255)+")";
document.getElementById("divchangecolor").style.background = randomColor;
}
<div id="divchangecolor" >
div que cambia de color, se enciende 2 segundos y se apaga.
</div>
<button class="conten" onclick="cambiar()">encender</button>
<button class="color" onclick="colorFunc()"> cambiar el de color</button>