0

Tengo que hacer un ejercicio bastante basico en js pero no logro resolverlo el ejercicio es 1) Crea dos radiobuttons, cuando uno de ellos se seleccione que muestre un mensaje diciendo que opción se seleccionó. mi codigo html es este y tambien tengo que utilizar la propiedad checked

 <h1>Indica que medio de transporte desea usar</h1>
    <form id="transporte">
      <input type="radio" name="transporte" id="Auto"> Auto </input> <br>
      <input type="radio" name="transporte" id="Bicicleta"> Bicicleta</input>

gracias yo estaba intentando algo asi

<body>
      <h1>Indica que medio de transporte desea usar</h1>
    <form action="">
      <input type="radio" value="auto" id="auto" onclick="transporte"> Auto </input> <br>
      <input type="radio" value="bicicleta" id="bicicleta" onclick="transporte"> Bicicleta</input>
      

    </form>

    <script >

        function transporte(){
        var auto = document.getElementById("auto");
        var bicicleta = document.getElementById("bicicleta");
        
        if(auto.checked == true){
            alert("El medio de trasnporte que eligio es: "+ auto.value);
        }else if(bicicleta.checked == true){
            alert("El medio de trasnporte que eligio es: "+ bicicleta.value);
        }

        }
     
     
    </script>
  </body>
2

2 respuestas 2

2

A ver si entendi bien, intenta hacer algo como esto, aclarando que agregue el atributo value a cada radio para poder extraer el valor del radio seleccionado

let opcion1 = document.querySelector('#Auto');
let opcion2 = document.querySelector('#Bicicleta');


document.querySelector('#transporte').addEventListener('change',()=>{
    if (opcion1.checked){
      alert('La opcion seleccionada es:'+' '+opcion1.value);
    }else if(opcion2.checked){
      alert('La opcion seleccionada es:'+' '+opcion2.value);
    }
})
 <h1>Indica que medio de transporte desea usar</h1>
    <form id="transporte">
        <input type="radio" name="transporte" id="Auto" value="Auto"> Auto </input> <br>
       <input type="radio" name="transporte" id="Bicicleta" value="Bicicleta"> Bicicleta</input>
    </form>

11
  • 1
    Hola amigo!, es una critica constructiva, no he ejecutado tu codigo, pero asi funcione bien ten en cuenta que no le hacemos ningun bien al que hizo la pregunta si nada mas resolvemos el problema sin que este haya dado evidencia primero de haberlo intentado, en este caso no se ha visto que el usuario haya hecho nada mas halla de eso, por ende normalmente se espera para responder hasta que el usuario de pistas de que realmente ha intentado realizar el mismo lo que ha preguntado. este tipo de recomendaciones las encontraras en varias preguntas similares.
    – Layer
    Commented el 22 sept. 2020 a las 2:10
  • 1
    Los usuarios antiguos o "veteranos" por eso evitan el responder sin mas a la pregunta, puesto que la idea es a ayudar al usuario a aprender, y no hacerle todo sin mas, sin embargo se aprecia el esfuerzo, en mi caso no votare ni positivo ni negativo ya que eres nuevo, pero entonces te invito a leer Cómo responder.
    – Layer
    Commented el 22 sept. 2020 a las 2:11
  • 1
    Jajjaja acabo de ver tu nombre, un idolo, ummmm ese cambio no necesariamente tiene que ser el form, ten en cuenta que el evento click tambien sirve para saber si se clico en un elemento. en este caso te sirve porque es un elemento radio.
    – Layer
    Commented el 22 sept. 2020 a las 2:28
  • 1
    De hecho estoy errado, es muchisimo mejor usar el evento change, ya que los radio tienen ese evento, y te escuchan justo el momento en el que ha habido un cambio en el radio si estan ligados, asi que... es mejor que se use un evento change en los radios que un evento click
    – Layer
    Commented el 22 sept. 2020 a las 2:33
  • 1
    @NikolaTesla es cierto, aunque... muchas veces no pasa asi, algunas ocasiones la persona simplemente se metio a preguntar directamente por pereza de no pensar, y es ahi cuando aplica aquello, por eso nosotros esperamos a que la persona edite el codigo para saber si realmente lo intento, ya que realmente para saber si alguien lo intento no necesitamos exactamente codigo, por ejemplo, dinos: ahh haciendo esto encontre esto o mirando por ahi encontre esto pero ningun resultado satisface lo que necesito, eso es diferente. es decir, hay evidencia de que algo intento
    – Layer
    Commented el 22 sept. 2020 a las 2:45
0

Intenta realizar algo como esto: te dejo una guia para que aprendas mas sobre

document.querySellectorAll();

Guia sobre querySellectorAll

/*la variable opciones esta lista 
para que agregues mas radios y siga
funcionando sin problema*/

let opciones = document.querySelectorAll('input[type="radio"]');

/*Agregamos un evento a tu formulario 
para detectar cuando algo suceda*/

document.querySelector('#transporte').addEventListener('change',()=>{

 // recorremos opciones ya que dentro hay una lista de nodos
    opciones.forEach(opcion =>{
    
 //si la opcion recorrida esta seleccionada mostramos esa opcion
        if(opcion.checked){
            alert('la opcion seleccionada es:'+' '+opcion.value);
        }
    })
})
    <h1>Indica que medio de transporte desea usar</h1>
    <form id="transporte">
        <input type="radio" name="transporte" id="Auto" value="Auto"> Auto </input> <br>
       <input type="radio" name="transporte" id="Bicicleta" value="Bicicleta"> Bicicleta</input>
    </form>

1
  • Porque hay dos respuestas? xd
    – Layer
    Commented el 22 sept. 2020 a las 3:39

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.