Error al mostrar con JavaScript el mensaje asociado a un radiobutton

El ejemplo es el siguiente: a la hora de seleccionar cualquiera de la opcion de los radio button, no me sale el mensaje del cual selecciono.

Nota: Lo ejecuto en Google Chrome y ya revisé que el <meta> está correcto. No encuentro el error por que no me sale el mensaje. Agradezco vuestra ayuda y gracias por adelantado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="es">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
    <title>Ejercicio radio button2 </title>
    <script type="text/javascript">
 
    //obtenemos los elementos con name = "pregunta"
    var elementos = document.getElementsByName("pregunta");
 
    //buscamos el seleccionado y lo mostramos por pantalla
    for (i = 0; i < elementos.legth; i++) {
        if (elementos[i].checked) {
            alert("Has seleccionado: "+ elementos[i].value);
        }
    }
    </script>
</head> 
<body>
    <input type="radio" value="si" name="pregunta"   id="pregunta_si"/> si
    <input type="radio" value="no" name="pregunta"   id="pregunta_no"/> no
    <input type="radio" value="nsnc" name="pregunta" id="pregunta_nsnc"/> ns/nc
</body>
</html>

Respuestas

En tu código veo dos cosas que se podrían mejorar:

Tienes dos etiquetas <html> en una misma página
Has puesto legth en vez de length dentro del bucle for

Probablemente esto último sea la causa del error.

@javiereguiluz

23 junio 2014, 17:50

gracias pero todavía no lo resuelvo corregi lo del legth x length pero nada sigue el problema

@davilapalomino

24 junio 2014, 16:18

El primer problema de tu código JavaScript original era que como no lo has encerrado entre ninguna instrucción especial, el navegador lo ejecuta tan pronto como encuentra ese código:

// obtenemos los elementos con name = "pregunta"
var elementos = document.getElementsByName("pregunta");
 
// buscamos el seleccionado y lo mostramos por pantalla
for (i = 0; i < elementos.legth; i++) {
    if (elementos[i].checked) {
        alert("Has seleccionado: "+ elementos[i].value);
    }
}

El error se produce porque el navegador busca todos los elementos cuyo name sea pregunta antes de que la página HTML se haya cargado entera. Así que cuando se ejecuta el código JavaScript, no existen los radio button de la página. La solución sería utiliza un código como el siguiente:

window.addEventListener('load', function () {
    // obtenemos los elementos con name = "pregunta"
    var elementos = document.getElementsByName("pregunta");
 
    // buscamos el seleccionado y lo mostramos por pantalla
    for (i = 0; i < elementos.legth; i++) {
        if (elementos[i].checked) {
            alert("Has seleccionado: "+ elementos[i].value);
        }
    }
}, false);

No obstante, este otro código tampoco te va a servir para lo que querías hacer. El motivo es que quieres mostrar un mensaje cada vez que se seleccione un radio button, por lo que tienes que decirle al navegador que esté atento a cualquier pinchazo sobre los radio button. Esto se hace controlando el evento click, por lo que el código completo que sí hace lo que quieres sería el siguiente:

<script type="text/javascript">
    window.addEventListener('load', function () {
        var elementos = document.getElementsByName("pregunta");
 
        for (i = 0; i < elementos.length; i++) {
            elementos[i].addEventListener('click', function(evento) {
                alert("Has seleccionado: " + evento.srcElement.value);
            });
        }
    }, false);
</script>

Por último, si vas a trabajar mucho con los eventos en JavaScript, te recomiendo que utilices una librería como jQuery ya que conseguirás los mismos resultados pero con mucho menos esfuerzo.

@javiereguiluz

24 junio 2014, 16:39

Gracias Javi

@davilapalomino

24 junio 2014, 18:02

Gracias Javi

@davilapalomino

24 junio 2014, 18:02

Gracias Javi

@davilapalomino

24 junio 2014, 18:02

Gracias Javi

@davilapalomino

24 junio 2014, 18:02

Gracias Javi

@davilapalomino

24 junio 2014, 18:02