1

Estoy comparando el color de background con valores de temperatura. Necesito orientación sobre una manera mejor de hacerlo.

Pd: cuando comparo con colores hexadecimales no me da el resultado que espero
lo hago de la siguiente manera con los últimos dos valores me sale el error, ¿qué estoy haciendo mal?

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>


<p id="demo"onclick="stilo()"></p>
<button onclick="stilo()">que color?</button>
<button onclick="stilo2()">pintar azul </button>
<button onclick="stilo3()">pintar amarillo</button>
<button onclick="stilo4()">pintar negro</button>
<button onclick="stilo5()">#01032a = 24.6</button>
<button onclick="stilo6()">24.2 hex to temp is equal</button>

<script type="text/javascript"> 



    function stilo()
    {

    if (document.body.style.backgroundColor == "blue")
        {   alert("150°C");


        }   else if (document.body.style.backgroundColor == "red") {
        alert("350°C");


        }   else if (document.body.style.backgroundColor == "gray") {
        alert("400°C");

        } else if (document.body.style.backgroundColor == "yellow") {
        alert("450°C");

        } else if (document.body.style.backgroundColor = '#000009') {
        alert("24°C");

        }else if (document.body.style.backgroundColor = '#000016') {
        alert("24.2°C");

        }else if (document.body.style.backgroundColor = '#00011d') {
        alert("24.4°C");

        }else if (document.body.style.backgroundColor = '#01032a') {
        alert("24.6°C");

        }
        }
  </script>
  <script type="text/javascript">
    function stilo2()
    {
    document.body.style.backgroundColor = "blue";

        }
  </script>
  <script>
  function stilo3()
    {
    document.body.style.backgroundColor = "red"; //primero

        }
  </script>
    <script>
  function stilo4()
    {
    document.body.style.backgroundColor = "gray"; //segundo

        }
  </script>
    <script>
  function stilo5()
    {
    document.body.style.backgroundColor = '#01032a';

        }
  </script>
    <script>
  function stilo6()
    {
    document.body.style.backgroundColor = '#000016';

        }
  </script>
</body>
</html>
3
  • Para empezar, reformula bien lo que quieres y redacta la pregunta bien, que parece que has tirado las letras. Después hay varios errores de programación básica, como comprar con '=' eso es operador de asignación.
    – F.bernal
    Commented el 29 ene. 2018 a las 8:35
  • estoy empezando mis primeros scripts y pues busco sacar un alerta dependiente del color de fondo de la pagina como para asociar un color con un valor y mostrarlo por alerta me sale bien con los nombres pero en hexadecimal deja de funcionar .. me podrian ayudar amigos ?
    – emanuelle
    Commented el 29 ene. 2018 a las 8:42
  • Mira este enlace: stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
    – F.bernal
    Commented el 29 ene. 2018 a las 9:11

2 respuestas 2

3

Aquí tienes una primera factorización del código para que veas como es mejor hacer las cosas, todavía es bastante mejorable pero ahora no tengo tiempo. Intenta ordenar bien las ideas primero.

function checkTemp()
{
  const backgroundColor = document.body.style.backgroundColor;

  switch (true) {
    case backgroundColor === "blue":
      alert("150°C");
      break;
    case backgroundColor === "red":
      alert("350°C");
      break;
    case backgroundColor === "gray":
      alert("400°C");
      break;
    case backgroundColor === "yellow":
      alert("450°C");
      break;
    case backgroundColor === "#000009":
      alert("24°C");
      break;
    case backgroundColor === "#000016":
      alert("24.2°C");
      break;
    case backgroundColor === "#00011d":
      alert("24.4°C");
      break;
    case backgroundColor === "#01032a":
      alert("24.6°C");
      break;
    default:
      alert("Temperature not detected");
      break;
  }
}

function changeBackground(color) {
  document.body.style.backgroundColor = color;
}
<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>


<p id="demo"onclick="checkTemp()"></p>
<button onclick="checkTemp()">que color?</button>
<button onclick="changeBackground('blue')">pintar azul </button>
<button onclick="changeBackground('yellow')">pintar amarillo</button>
<button onclick="changeBackground('black')">pintar negro</button>
<button onclick="changeBackground('#01032a')">#01032a = 24.6</button>
<button onclick="changeBackground('#000016')">24.2 hex to temp is equal</button>

</body>
</html>

2
  • Aunque es un buen consejo, esto no es una respuesta a la pregunta realizada por el OP, creo que debería ser un comentario Commented el 29 ene. 2018 a las 8:58
  • Gracias por tu ayuda estimado F.bernal !! .. Ojala alguien pudiera orientarme sobre porque no comprueba el valor en hexadecimal :(
    – emanuelle
    Commented el 29 ene. 2018 a las 8:59
2

El problema es que los valores se guardan de un modo distinto al que esperas:

let div=document.getElementById('test');

let colors=['red','yellow','#aabbcc','#112233'];
let index=0;
let interval=setInterval(
  ()=> {
    div.style.backgroundColor=colors[index];
    console.log('Color establecido:' + colors[index]);
    console.log('Color guardado:' + div.style.backgroundColor);
    index++
    if (index==4) {
      clearInterval(interval);
    }
  },300);
#test {
  height: 50px;
  width: 50px;
  border: 1px solid black;
}
<div id="test"/>

Como ves en el ejemplo, si usas los nombres preestablecidos, todo funciona. En cambio, cuando usas almohadilla o gato (en inglés hash, #) más valores hexadecimales, el formato devuelto al leer dichos valores es rgb(<valor decimal>, <valor decimal>, <valor decimal>)

1
  • Muchas gracuas Pablo Lozano ya estoy analizando tu amable respuesta
    – emanuelle
    Commented el 29 ene. 2018 a las 21:40

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.