Duda Cuestionario JS

RexSsar #1 Nov '19

Buenas, llevo unos días dándole vueltas a esta practica, llevo muy poco con JS y no entiendo muy bien porque no me va esta función para que me lleve un recuento de las opciones que ha seleccionado en el cuestionario.

spoiler

	<script>
function resultado() {
var contA=0, contB=0, contC=0, contD=0, totalContA=0, totalContB=0, totalContC=0, totalContD=0;
<!-- 1ª opcion -->
if (document.getElementById('pA').checked==true) {contA++}
<!-- 2ª opcion -->
if (document.getElementById('pB').checked==true) {contB++}
<!-- 3ª opcion -->
if (document.getElementById('pC').checked==true) {contC++}
<!-- 4ª opcion -->
if (document.getElementById('pD').checked==true) {contD++}

totalContA=contA;
totalContB=contB;
totalContC=contC;
totalContD=contD;
alert(" Resultado: " + totalContA);
alert(" Resultado: " + totalContB);
alert(" Resultado: " + totalContC);
alert(" Resultado: " + totalContD);
location.reload();
}

</script>
	</head>
<body>
<form>
<h2>De las siguientes caracter&iacute;sticas personales indica con cu&aacute;l de cada cuatro (s&oacute;lo una de ellas) te sientes m&aacute;s identificado/a:</h2>
	<table>                            1
	   <tr>
		   <td><p><input type="radio" name="pregunta1" id="pA">A</p></td>
		   <td></td>
		   <td></td>
		   <td></td>
		   <td>Directo/a</td>
	   </tr>
	   <tr>
		   <td></td>
		   <td><p><input type="radio" name="pregunta1" id="pB">B</p></td>
		   <td></td>
		   <td></td>
		   <td>Hablador/a</td>
	   </tr>

   <tr>
	   <td></td>
	   <td></td>
	   <td><p><input type="radio" name="pregunta1" id="pC">C</p></td>
	   <td></td>
	   <td>Suave</td>
   </tr>
   <tr>
	   <td></td>
	   <td></td>
	   <td></td>
	   <td><p><input type="radio" name="pregunta1" id="pD">D</p></td>
	   <td>Primero analizo cuidadosamente las situaciones</td>
   </tr>
</table> 
<br/>	
	<table>                2
		<tr>
			<td><p><input type="radio" name="pregunta2" id="pA">A</p></td>
			<td></td>
			<td></td>
			<td></td>
			<td>Atrevido/a</td>
		</tr>
		<tr>
			<td></td>
			<td><p><input type="radio" name="pregunta2" id="pB">B</p></td>
			<td></td>
			<td></td>
			<td>Me entusiasmo con facilidad</td>
		</tr>

	<tr>
		<td></td>
		<td></td>
		<td><p><input type="radio" name="pregunta2" id="pC">C</p></td>
		<td></td>
		<td>Tiendo a no participar activamente</td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td><p><input type="radio" name="pregunta2" id="pD">D</p></td>
		<td>Me gusta que todo est&eacute; bien organizado</td>
	</tr>
   
</table>
<br/>
<table>                      3
	<tr>
		<td><p><input type="radio" name="pregunta3" id="pA">A</p></td>
		<td></td>
		<td></td>
		<td></td>
		<td>Contundente</td>
	</tr>
	<tr>
		<td></td>
		<td><p><input type="radio" name="pregunta3" id="pB">B</p></td>
		<td></td>
		<td></td>
		<td>Persuasivo/a</td>
	</tr>

	<tr>
		<td></td>
		<td></td>
		<td><p><input type="radio" name="pregunta3" id="pC">C</p></td>
		<td></td>
		<td>Simp&aacute;tico/a</td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td><p><input type="radio" name="pregunta3" id="pD">D</p></td>
		<td>Exacto/a</td>
	</tr>
   
</table>
<p><input type="button" value=" R E S U L T A D O " onclick="resultado()"/></p>
</form>
</body>
</html>

benjajim #2 Nov '19 Inocente

Creo que primeramente tienes un fallo de concepto pero para empezar .. ¿donde invocas a la funcion "Resultado"?

1 1 respuesta

RexSsar #3 Nov '19

#2 Lo siento, para acortar el código y no poner todas las preguntas se me olvido poner donde la invoco. Ya está corregido.

XinXan #4 Nov '19

#1 JavaScritp es Case Sensitive, la funcion es Resultado y estas ejecutando resultado

3 1 respuesta

RexSsar #5 Nov '19

#4 Muchas gracias por contestar, pero me sigue pasando lo mismo, una vez que pongo las opciones solo me cuenta la primera que pongo.

XinXan #6 Nov '19

Vale, entiendo que estas intentando seleccionar todos los elementos con respuesta tipo A/B/C/D y para ello estas usando el selector document.getElementById, esto solo te retornará un elemento, ya que al buscar por ID este debe ser único. Podrías usar otro tipo de selector, por ejemplo añadiendo el atributo class y usando la funcion getElementsByClassname y luego iterar sobre ellos para ver si estan seleccionados, te dejo algo a modo ejemplo basandome en tu ejemplo

	<script>
function Resultado() {
	var totalContA=0, totalContB=0, totalContC=0, totalContD=0;

Array.from(document.getElementsByClassName("pA")).forEach(function(element, index, array) {
  if(element.checked) totalContA++;;
});

Array.from(document.getElementsByClassName("pB")).forEach(function(element, index, array) {
  if(element.checked) totalContB++;;
});

Array.from(document.getElementsByClassName("pC")).forEach(function(element, index, array) {
  if(element.checked) totalContC++;;
});

Array.from(document.getElementsByClassName("pD")).forEach(function(element, index, array) {
  if(element.checked) totalContD++;;
});

alert(" Resultado A: " + totalContA);
alert(" Resultado B: " + totalContB);
alert(" Resultado C: " + totalContC);
alert(" Resultado D: " + totalContD);
location.reload();
}

</script>
	</head>
<body>
<form>
<h2>De las siguientes caracter&iacute;sticas personales indica con cu&aacute;l de cada cuatro (s&oacute;lo una de ellas) te sientes m&aacute;s identificado/a:</h2>
	<h3>Pregunta 1</h2>
	<table>
	   <tr>
		   <td><input type="radio" name="pregunta1" class="pA"></td>
		   <td>Directo/a</td>
	   </tr>
	   <tr>
		   <td><input type="radio" name="pregunta1" class="pB"></td>
		   <td>Hablador/a</td>
	   </tr>

   <tr>
	   <td><input type="radio" name="pregunta1" class="pC"></td>
	   <td>Suave</td>
   </tr>
   <tr>
	   <td><input type="radio" name="pregunta1" class="pD"></td>
	   <td>Primero analizo cuidadosamente las situaciones</td>
   </tr>
</table> 

<br/>	
	<h3>Pregunta 2</h2>
	<table>
		<tr>
			<td><input type="radio" name="pregunta2" class="pA"></td>
			<td>Atrevido/a</td>
		</tr>
		<tr>
			<td><input type="radio" name="pregunta2" class="pB"></td>
			<td>Me entusiasmo con facilidad</td>
		</tr>

<tr>
	<td><input type="radio" name="pregunta2" class="pC"></td>
	<td>Tiendo a no participar activamente</td>
</tr>
<tr>
	<td><input type="radio" name="pregunta2" class="pD"></td>
	<td>Me gusta que todo est&eacute; bien organizado</td>
</tr>
   
</table>

<h3>Pregunta 3</h2>
<table>
	<tr>
		<td><input type="radio" name="pregunta3" class="pA"></td>
		<td>Contundente</td>
	</tr>
	<tr>
		<td><input type="radio" name="pregunta3" class="pB"></td>
		<td>Persuasivo/a</td>
	</tr>

<tr>
	<td><input type="radio" name="pregunta3" class="pC"></td>
	<td>Simp&aacute;tico/a</td>
</tr>
<tr>
	<td><input type="radio" name="pregunta3" class="pD"></td>
	<td>Exacto/a</td>
</tr>
   
</table>
<p><input type="button" value=" R E S U L T A D O " onclick="Resultado()"/></p>
</form>
</body>
</html>

Intenta aprender primero bien los conceptos de los selectores del DOM mediante JavaScript

1 1 respuesta

RexSsar #7 Nov '19

#6 Muchas gracias, no sabia lo del ID,me pondré a mirarme bien los selectores del DOM.

Pero tu ejemplo me ha servido para entenderlo, repito de nuevo muchas gracias!

isvidal #8 Nov '19

Como consejo ultra basico y chustero, pero no tan chustero como usar alerts, usa console.log por dios, debugar data a base de consoles logs ya es "chustero" pero útil, pero es que a base de alerts es chustero y lento.

1

JuAn4k4 #9 Nov '19

otro consejo: para hacer 4 veces lo mismo, no hace falta copiar y pegar el código 4 veces.

1

Duda Cuestionario JS

Usuarios habituales

Tags