HTML + JS Puro no funciona

HmrO · #1 (**permalink**) 05/07/2016, 21:44

Buenos días, recurro a ustedes debido a que no se que es lo que puede estar fallando en mi código. Lo que intento hacer se puede hacer en el Framewrok jQuery, VBasic, C++ y C#. El tema es que lo tengo que hacer sí o sí en JavaScript puro y la verdad no doy con la solución ya que no me da ningún error en la consola (Lo que puede significar que hay algo del HTML que JavaScript no está tomando).

Acá les dejo el código de la trivia game para que se den una idea que puede estar pasando. Un saludo!

index.html

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="game.js"></script>
</head>
<body>
    	<section>
    		<article>“Pregunta 1”
    		  <ul class="ans">
			    <li><label><input name="q1" type="radio" value="0" >Opción 1</label></li>
			    <li><label><input name="q1" type="radio" value="1" >Opción 2</label></li>
			  </ul>
    		</article>
    	</section>
</body>
</html>

game.js

Código:

document.addEventListener('DOMContentLoaded', function () {

  var x = document.getElementsByName("q1");

  if (x.checked == true) {
    alert("hola");
  }

});

caricatos · #2 (**permalink**) 06/07/2016, 01:16

Hola:

Tu variable x referencia a un array, por lo que deberías consultar sus dos índices...

Saludos

leugimsiul · #3 (**permalink**) 06/07/2016, 01:27

Buenas:

Código Javascript:

Ver originaldocument.getElementsByName("q1")

Te devuelve un array con los input que tengan el name="q1", por lo que lo correcto sería:

Código Javascript:

Ver originalvar x = document.getElementsByName("q1");
 
for(var i = 0, len = x.length; i < len; i++){
    if (x[i].checked == true) {
        alert("hola input " + i);
    }
}

HmrO · #4 (**permalink**) 06/07/2016, 09:32

Hice lo que me dijeron que si bien es correcto, me sigue sin funcionar. Acá les muestro el código actualizado.

Código HTML:

 <li><label><input name="q1" value="0" type="radio" onclick="send();" >resp1</label></li>
			    <li><label><input name="q1" value="1" type="radio" onclick="send();" >resp2</label></li>

Código:

document.addEventListener('DOMContentLoaded', function () {

 var x = document.getElementsByName("q1");
    var answer;
    for (var i = 0; i < x.length; i++) {
        if (x[i].checked === true) {
            answer = x[i].value;
            break
        }
    }

  if (answer == 0) {
        console.log("true");
    } else if (answer ==1){
        console.log("false");
    }

});

Me tira un send(); is not defined

HmrO · #5 (**permalink**) 06/07/2016, 10:00

Solucionado, lo que hice fue borrar el Listener, ahora lo que quiero hacer es que cuando hagas click en una pantalla en este caso un name, este pase al otro y se oculte el anterior por lo menos cinco veces, no se si tendré que usar un array o asignarle varios valores al getElementsByName para después usar un if else. Que se les ocurre? Acá les dejo mi JS. Saludos.

Código Javascript:

Ver originalfunction answer(){ 
 
    var x = document.getElementsByName("q1", "q2", "q3", "q4", "q5");
    var answer;
    for (var i = 0; i < x.length; i++) {
        if (x[i].checked === true) {
            answer = x[i].value;
            break
        }
    }
 
 
 
    if (answer == 0) {
        var a = document.getElementsByTagName("article")[0];
        a.innerHTML = "CORRECTO";
    }else{
        var a = document.getElementsByTagName("article")[0];
        a.innerHTML = "INCORRECTO";
    }
  
 }
 
 function send(){
    
    if (x == 0){
        document.getElementById("q1").style.display = "none";
        document.getElementById("q2").style.display = "block";
    }
    if (x == 1){
        document.getElementById("q2").style.display = "none";
        document.getElementById("q3").style.display = "block";
    }
 }