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.