0

Me gustaría cambiarle de color al div por medio de la función, la cual ya la tengo con math.random, pero no puedo cambiarlo de color, por que? y lo otro es, cuando yo precioso el botón encender, el div encenderá con el color amarillo el cual dura 2 segundos y luego se apagara, por el momento no me enciende cando precioso el botón,enciende después y se apaga. como puedo encenderlo y a pagarlo?

var color=false;

function cambiar() {    

     color = !color;    

     document.getElementById("divchangecolor").style.background= color ? "" : "yellow";    

    setTimeout("cambiar()",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 color(){
    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"> cambiar el de color</button>

1 respuesta 1

1

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>

1
  • ha quedado perfecto, creo que a un me falta mucho camino por recorre, muchas gracias por corregir el código, realmente no sabia como hacerlo.
    – BernalHD
    Commented el 12 nov. 2019 a las 12:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.