show item when a radio button is pressed

Viewed 29

document.querySelectorAll("input + label.Principal").forEach((e) => {
  const radio = e.parentNode.children[0];
  const dia = e.textContent.trim();
  radio.addEventListener("input", () => {
    document.querySelector(".show")?.classList?.remove("show");
    document.getElementById("contenedor" + dia).classList.add("show");
    console.log(dia);
  });
});
.semana {
  display: flex;
  justify-content: center;
  margin: 100px;
}
.Principal {
  padding: 30px;
  margin: 15px;
  border: solid 2px #012e58;
  border-radius: 5px;
  transition: all 0.3s ease;
  color: #012e58;
}
.botonDia input[type="radio"] {
  display: none;
}

.botonDia input[type="radio"]:checked + label {
  background-color: #012e58;
  padding: 50px;
  margin-right: 15px;
  border: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  color: #fff;
}
.contenedor {
  display: none;
}
.show {
  display: block;
}
<div class="semana">
        <div class="botonDia">
          <input name="dia" type="radio" id="lunes" />
          <label for="lunes" class="Principal">dua </label>
        </div>
        <div class="botonDia">
          <input name="dia" type="radio" id="martes" />
          <label for="martes" class="Principal">Martes </label>
        </div>
        <div class="botonDia">
          <input name="dia" type="radio" id="miercoles" />
          <label for="miercoles" class="Principal">Miercoles </label>
        </div>
        <div class="botonDia">
          <input name="dia" type="radio" id="jueves" />
          <label for="jueves" class="Principal">Jueves </label>
        </div>
        <div class="botonDia">
          <input name="dia" type="radio" id="viernes" />
          <label for="viernes" class="Principal">Viernes </label>
        </div>
        <div class="botonDia">
          <input name="dia" type="radio" id="sabado" />
          <label for="sabado" class="Principal">Sabado </label>
        </div>
        <div class="botonDia">
          <input name="dia" type="radio" id="domingo" />
          <label for="domingo" class="Principal">Domingo </label>
        </div>
      </div>
      <div class="contenedor" id="contenedorLunes">
        <p>¡Feliz día! Para empezar, te invitamos a seleccionar los ejercicios que conformarán tu rutina de hoy:</p>
        </div>
        <div class="contenedor" id="contenedorMartes">
        <p>¡Feliz día! Para empezar, te invitamos a seleccionar los ejercicios que conformarán tu rutina de hoy:</p>
        </div>
        <div class="contenedor" id="contenedorMiercoles">
        <p>¡Feliz día! Para empezar, te invitamos a seleccionar los ejercicios que conformarán tu rutina de hoy:</p>
        </div>

Hello, I have a problem, I have this code and basically what it does is that when the radio button is pressed it shows a specific div, now, I have to change the text of the label (Lunes, Martes, Miercoles... etc) for: día 1, día 2, día 3 ... etc. but when I do that it no longer shows me anything when I click it.

0 Answers
Related