2

En este codigo quiero cambiar de color el texto al dar click pero no me sale... no se donde esta el error

        function changeColor(id) {
            el = document.getElementById('p');
            if (el.style.color == rgb(0,255,0)) {
                el.style.color = rgb(255,0,0);
            }else{
                el.style.color = rgb(0,255,0);
            }
        }
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>Cambiando de color</h1>
    <div style="color:rgb(0,255,0)" id='p'>
    Este es el texto a cambiar
</div>
    <button type="button" onclick="changeColor('p')">Cambiar</button>
</body>
</html>
introducir el código aquí
En este codigo quiero cambiar de color el texto al dar click pero no me sale... no se donde esta el error

2
  • 2
    Hay que aprender a depurar el código... Pista: hacé console.log del color actual de tu elemento, antes del if. Además, la función rgb es de CSS, no de JS. Al ejecutar el snippet, explícitamente te dice rgb is not defined.
    – padaleiana
    Commented el 12 dic. 2022 a las 16:40
  • todos los rgb que tienes en tu js tienen que estar entre comillas => "rgb(0,255,0)" Commented el 12 dic. 2022 a las 16:41

1 respuesta 1

1

Lo que obtienes al extraer el estilo del elemento es un String por lo que tanto al compararlo, como al asignarle valor, debes de hacerlo a través de un String.

Hay que considerar también que el formato en el que te es devuelto el color mete un espacio después de cada coma, por lo que en tu comparación se tiene que ver contemplado.

function changeColor() {
  const el = document.getElementById('p')
  
  if (el.style.color === 'rgb(0, 255, 0)') {
    el.style.color = 'rgb(255, 0, 0)'
  }
  else{
    el.style.color = 'rgb(0, 255, 0)'
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>Cambiando de color</h1>
    <div style="color:rgb(0,255,0)" id='p'>
    Este es el texto a cambiar
</div>
    <button type="button" onclick="changeColor('p')">Cambiar</button>
</body>
</html>
introducir el código aquí

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.