2

tengo un problema con js, recien lo aprendo y estoy haciendo una pagina tipo encuesta , pero no puedo hacer que salgan los nombres seleccionados

<td>
                Deportes favoritos
            </td>
            <td >
                <input type="checkbox" id="ch1" name="deporte" value="ciclismo">ciclismo
                <br>
                <input type="checkbox" id="ch2" name="deporte" value="tenis">tenis
                <br>
                <input type="checkbox" id="ch3" name="deporte" value="natacion">natacion
                <br>
                <input type="checkbox" id="ch4" name="deporte" value="karate">karate
            </td>

y asi tengo la funcion :

function datos(){
        var nb;
        var sx;
        var dp;

        nb=document.getElementById('txtnombre').value;
        sx=document.querySelector('input[name=sex]:checked').value 
        dp=document.querySelectorAll('input[name=deporte]:checked')
        for(var i=0;i<dp.length;i++){
            console.log(dp)

        }

    document.write('<table border="2" cellspacing="0" align="center">')
    document.write('<th align=center colspan=2>Datos registrados</th>')
    document.write('<tr><td align=center>Nombre :</td><td>'+nb+'</td></tr>')
    document.write('<tr><td align=center>Sexo :</td><td>'+sx+'</td></tr>')
    document.write('<tr><td align=center>Deportes favoritos :</td><td>'+dp+'</td></tr>')
    document.write('</table')
    }

Me sale este error introducir la descripción de la imagen aquí

Como pueden ver si me cuenta lo que elijo en el checkbox , pero no lo puedo mostrar por nombre , solo puse el for para ver si me estaba guardando los checks

Gracias por su respuestas...

1
  • No se entiende bien lo que pretendes conseguir. Lo primero de todo: ¿Cuándo quieres lanzar la función datos()? ¿Qué elemento es el que tiene la id="txtnombre"? En tu HTML no lo tienes, al igual que tampoco tienes ningún <input> con nombre sex.
    – phpMyGuel
    Commented el 9 sept. 2019 a las 9:28

1 respuesta 1

0

Si he entendido bien, lo que quieres es listar en la tabla los deportes que el usuario haya seleccionado. Tal y como lo tienes, lo que estas tratando de mostrar es un array ya que el método querySelectorAll() nos devuelve una colección con todos los elementos que coincidan con el selector (de ahí que te imprima en la tabla object NodeList).

Para poder listar los valores de los deportes seleccionados tendrías que iterar esa colección e ir accediendo a cada una de sus posiciones para sacar el valor de cada elemento.

<td>
    Deportes favoritos
</td>
<td >
    <input type="checkbox" id="ch1" name="deporte" value="ciclismo">ciclismo
    <br>
    <input type="checkbox" id="ch2" name="deporte" value="tenis">tenis
    <br>
    <input type="checkbox" id="ch3" name="deporte" value="natacion">natacion
    <br>
    <input type="checkbox" id="ch4" name="deporte" value="karate">karate
</td>

<button type="button" onclick="datos()">Comprobar</button>

<script>
  function datos() {
    var nb;
    var sx;
    var dp;

    nb="Fulanito";
    sx="Poco";
    dp=document.querySelectorAll('input[name=deporte]:checked');

    document.write('<table border="2" cellspacing="0" align="center">');
    document.write('<th align=center colspan=2>Datos registrados</th>');
    document.write('<tr><td align=center>Nombre :</td><td>'+nb+'</td></tr>');
    document.write('<tr><td align=center>Sexo :</td><td>'+sx+'</td></tr>');
    document.write('<tr><td align=center>Deportes favoritos :</td><td>');

    for(var i=0;i<dp.length;i++){
       document.write(dp[i].value + '<br>'); 
    }
  
    document.write('</td></tr>');
    document.write('</table');
  }
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.