1

Tengo 3 checkbox, y necesito que cada uno me cambie el fondo de un color. Consigo que el primero,cambie de color, pero los demás, no sé cómo hacer para referirme a ellos, probé con el queryselectorAll, pero no me funciona.

'use strict'


let box = document.querySelector('input[type=checkbox]'); 

function color(){
    if(box.checked)
    document.body.style.background='red';
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <input type="checkbox" value="red" onchange ="color()"/>Rojo
        <input type="checkbox" value="blue" onchange ="color()"/>Azul  
        <input type="checkbox" value="gren" onchange ="color()"/>Verde


<script src="ejercicio4.js"></script>
</body>
</html>

1 respuesta 1

1

Lo que te conviene usar para esto es un input tipo radio, ya que cuando varios radio tienen el mismo name no podrás seleccionar más de uno a la vez. Si se trata de cambiar el color de fondo en base a ese criterio, será muy complicado con el checkbox, ya que podrías tener varios seleccionados al mismo tiempo, teniendo que recurrir a un procedimiento sumplemetario para hacer que el checkbox se comporte como si fuese un radio.

Si usas un radio el proceso es muy simple. Ni siquiera tendrías que usar el if, simplemente obtienes el value del radio dentro de la función y en base a él cambias el color de fondo. Eso es todo.

Otra cosa, tenías en error al escribir gren, debe ser green.

'use strict'

function color() {
  var cssColor = document.querySelector('input[name="colors"]:checked').value;
  console.log(cssColor);
  document.body.style.background = cssColor;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="radio" name="colors" value="red" onchange="color()" />Rojo
  <input type="radio" name="colors" value="blue" onchange="color()" />Azul
  <input type="radio" name="colors" value="green" onchange="color()" />Verde


  <script src="ejercicio4.js"></script>
</body>

</html>

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.