1

Tengo una especie de semáforo y quisiera rellenarlo en función de la opción que vaya escogiendo el usuario con un radio button con valores {0,1,2,3}. Con 0, se apagan todos, con 1 se enciende el primero, con 2 se enciende el primero y el segundo y con 3 se encienden todos.

He metido cada círculo en una división simplemente para alinearlo a mi manera con el css correspondiente.

<div class="TLightR">
<svg id="svg1" style="width: 1.5in; height: 0.55in">
<circle id="circle1" r="20" cx="30" cy="30" style="fill: red; stroke: black;      stroke-width: 2"/>
</svg>
</div>

<div class="TLightY">
<svg id="svg2" style="width: 1.5in; height: 0.55in">
<circle id="circle2" r="20" cx="30" cy="30" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</div>

<div class="TLightG">
<svg id="svg3"style="width: 1.5in; height: 0.55in">
<circle id="circle3" r="20" cx="30" cy="30" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</div>

<div class="Led1">
<input type="radio" name="Led1" value="0">0
<input type="radio" name="Led1" value="1">1
<input type="radio" name="Led1" value="2">2
<input type="radio" name="Led1" value="3">3
</div>

¿Alguna idea de como hacerlo en HTML? ¿O habría ya que meterse en PHP o JS?

Muchas gracias de antemano.

EDITO: Muchas gracias por la respuesta, el problema viene ahora cuando quiero darle un posicionamiento relativo para cada círculo de manera independiente. Ya no puedo usar el div class="TlightR" ya que deja de funcionar, alguna idea?

EDITO2: Ya lo he conseguido, aunque he tenido que llamar a los círculos con distintas clases para poder meterlos dentro de clases y asignarles posicionamiento relativo dentro del .css

<section class="semaforo">  
                            <div class="Cir1">
                      <svg class="semaforo-luz">
                    <circle class="circulo1" cx="20" cy="20" r="20"></circle>
                      </svg>  
                            </div>
                            <div class="Cir2">
                      <svg class="semaforo-luz">
                    <circle class="circulo2" cx="20" cy="20" r="20"></circle>
                      </svg>
                            </div>
                            <div class="Cir3">
                      <svg class="semaforo-luz">
                    <circle class="circulo3" cx="20" cy="20" r="20"></circle>
                      </svg>
                            </div>
                </section>
                <section>
                <div class="Led1Css">
                    <input class="semaforo-sistema" type="radio" name="Led1" value="0">0
                    <input class="semaforo-sistema" type="radio" name="Led1" value="1">1
                    <input class="semaforo-sistema" type="radio" name="Led1" value="2">2
                    <input class="semaforo-sistema" type="radio" name="Led1" value="3">3

</section>

<script>
let eleccion = document.querySelectorAll(".semaforo-sistema")

let circulo1 = document.querySelectorAll(".circulo1")
let circulo2 = document.querySelectorAll(".circulo2")
let circulo3 = document.querySelectorAll(".circulo3")


eleccion.forEach((elemento) => {
    elemento.addEventListener("click", () => {
      if (elemento === eleccion[1]) {
        circulo1[0].classList.add("semaforo-rojo")
        circulo2[0].classList.remove("semaforo-amarillo")
        circulo3[0].classList.remove("semaforo-azul")
      } else if(elemento === eleccion[2]) {
        circulo1[0].classList.add("semaforo-rojo")
        circulo2[0].classList.add("semaforo-amarillo")
        circulo3[0].classList.remove("semaforo-azul")
      } else if(elemento === eleccion[3]){
        circulo1[0].classList.add("semaforo-rojo")
        circulo2[0].classList.add("semaforo-amarillo")
        circulo3[0].classList.add("semaforo-azul")  
      } else if(elemento === eleccion[0]){
        circulo1[0].classList.remove("semaforo-rojo")
        circulo2[0].classList.remove("semaforo-amarillo")
        circulo3[0].classList.remove("semaforo-azul")
      }
    })
})
</script>

1 respuesta 1

1

No hay necesidad de meter al juego a PHP pero si a JS que nos permite acceder a los nodos del DOM.

Parte 1

Maneja los colores de fondo que aplicarás por medio de clases que se puedan asignar y remover según sea la necesidad.

<style>
  .semaforo-luz {
    stroke: black;
    stroke-width: 2;
  }
  .semaforo-rojo {
    fill: red;
    stroke-width: 2;
  }
  .semaforo-verde {
    fill: green;
    stroke-width: 2;
  }
</style>

Parte 2

Reacomoda o considera hacerlo la estructura de tu HTML de este modo:

<section>
  <input class="semaforo-sistema" type="radio" name="activador" value="1" />Enciende rojo
  <input class="semaforo-sistema" type="radio" name="activador" value="2" />Enciende verde
  <input class="semaforo-sistema" type="radio" name="activador" value="3" />Enciende amarillo
</section>
<section class="semaforo">
  <svg class="semaforo-luz">
    <circle class="circulo" cx="50" cy="40" r="30"></circle>
  </svg>
  <svg class="semaforo-luz">
    <circle class="circulo" cx="50" cy="40" r="30"></circle>
  </svg>
  <svg class="semaforo-luz">
    <circle class="circulo" cx="50" cy="40" r="30"></circle>
  </svg>
</section>

Parte 3

Puedes obtener todos los input radio por medio de una clase que en común les asignes a todos, lo mismo para los 3 círculos dibujados dándoles una clase en común

let eleccion = document.querySelectorAll(".semaforo-sistema")
let circulos = document.querySelectorAll(".circulo")

Lo anterior para que puedas iterar los input y reconocer por medio de su posición cual de los 3 esta clikeando el usuario.

Te vales de classList.add y de classList.remove para agregar o quitar las clases que dan los colores de las luces del semáforo según sea el caso

EJEMPLO COMPLETO

Nota te dejo la lógica para el color amarillo :)

    <style>
      .semaforo-luz {
        stroke: black;
        stroke-width: 2;
      }
      .semaforo-rojo {
        fill: red;
        stroke-width: 2;
      }
      .semaforo-verde {
        fill: green;
        stroke-width: 2;
      }
    </style>
    <section>
      <input class="semaforo-sistema" type="radio" name="activador" value="1" />Enciende rojo
      <input class="semaforo-sistema" type="radio" name="activador" value="2" />Enciende verde
      <input class="semaforo-sistema" type="radio" name="activador" value="3" />Enciende amarillo
    </section>
    <section class="semaforo">
      <svg class="semaforo-luz">
        <circle class="circulo" cx="50" cy="40" r="30"></circle>
      </svg>
      <svg class="semaforo-luz">
        <circle class="circulo" cx="50" cy="40" r="30"></circle>
      </svg>
      <svg class="semaforo-luz">
        <circle class="circulo" cx="50" cy="40" r="30"></circle>
      </svg>
    </section>
    <script>
      let eleccion = document.querySelectorAll(".semaforo-sistema")
      let circulos = document.querySelectorAll(".circulo")
      
      eleccion.forEach((elemento) => {
        elemento.addEventListener("click", () => {
          if (elemento === eleccion[0]) {
            circulos[0].classList.add("semaforo-rojo")
            circulos[1].classList.remove("semaforo-verde")
          } else if(elemento === eleccion[1]) {
            circulos[1].classList.add("semaforo-verde")
            circulos[0].classList.remove("semaforo-rojo")
          }
        })
      })
    </script>

2
  • Muchísimas gracias!! Muy buena explicación y código. Hay alguna manera de ponerle otro identificador para añadirle posicionamiento relativo a cada uno de ellos? Querría posicionarlos en fila y en una posición concreta pero añadir el <div class> para modificarlos en CSS supongo que esa clase se carga a la de svg y deja de funcionar el radio button... Commented el 27 ene. 2020 a las 1:29
  • Solucionado, muchas gracias Aprendiz! Commented el 27 ene. 2020 a las 10:38

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.