Estoy programando un pequeño cuestionario que te muestra cuál de los cuatro productos posibles se adapta mejor a ti.
Las diferentes preguntas se hacen con entradas de radio y cada una tiene el valor adecuado
<input class="answer__input" type="radio" id="question1" value="product1" /> <input class="answer__input" type="radio" id="question1" value="product2" /> <input class="answer__input" type="radio" id="question1" value="product3" /> <input class="answer__input" type="radio" id="question1" value="product4" />En JavaScript tengo 4 Variables:
var product1 = 0 var product2 = 0 var product3 = 0 var product4 = 0Ahora quiero que cada vez que se seleccione una respuesta, la variable respectiva aumente en 1
Después de 10 preguntas podría verse así:
var product1= 2 var product2 = 4 var product3 = 3 var product4 = 1Al final del cuestionario, quiero generar la variable que es la más grande.
¿Cómo puedo hacer esto en JavaScript? Estaría muy agradecido por esa ayuda :)
No puede usar la misma id 4 veces y debe agregar el name a la entrada de radio. He reconstruido tu html:
1 product<input class="answer__input question1" name="question1" type="radio" id="product1" value="product1" /><br> 2 product<input class="answer__input question1" name="question1" type="radio" id="product2" value="product2" /><br> 3 product<input class="answer__input question1" name="question1" type="radio" id="product3" value="product3" /><br> 4 product<input class="answer__input question1" name="question1" type="radio" id="product4" value="product4" /><br> Ahora también agregué un detector de eventos para el evento de change usando un bucle for en todos los productos. En la función, verifiqué en qué opción hizo clic el usuario e incrementé el valor correspondiente.
var product1 = 0; var product2 = 0; var product3 = 0; var product4 = 0; for (i = 1; i <= 4; i++) { document.getElementById(`product${i}`).addEventListener('change', e => { if (e.target.value === 'product1') product1++; else if (e.target.value === 'product2') product2++; else if (e.target.value === 'product3') product3++; else if (e.target.value === 'product4') product4++; console.log(product1, product2, product3, product4); }); }