0

Me explico, quiero obtener el valor de los input radio con un click y este valor se almacenara en un input text, con uno no he tenido problema, pero con 2 o 3 NO me llega a ejecutar.

Aquí ya he hecho uno, pero el punto es que estoy repitiendo código, ¿no habría una manera de simplificarlo? Ya que son 137.

HTML

<div class="contenedor">

 <div>
    <label><input type="radio" name="fruta" class="radio_fruta" value="Manzana">Manzana<label>
    <label><input type="radio" name="fruta" class="radio_fruta" value="Pera">Pera<label>
    <label><input type="radio" name="fruta" class="radio_fruta" value="Platano">Platano<label>
    <label><input type="radio" name="fruta" class="radio_fruta" value="Piña">Piña<label>

    <input type="text" class="campo_fruta" value="Vacio">
 </div>

    <br>
    <br>

    <!--/////////////////////////////////////////////////////////////////////////////////////////-->

 <div>
    <label><input type="radio" name="numero" class="radio_numero" value="1">1<label>
    <label><input type="radio" name="numero" class="radio_numero" value="2">2<label>
    <label><input type="radio" name="numero" class="radio_numero" value="3">3<label>
    <label><input type="radio" name="numero" class="radio_numero" value="4">4<label>

    <input type="text" class="campo_numero" value="Vacio">
 </div>   

    <br>
    <br>

    <!--/////////////////////////////////////////////////////////////////////////////////////////-->

 <div>
    <label><input type="radio" name="mascota" class="radio_mascota" value="Perro">Perro<label>
    <label><input type="radio" name="mascota" class="radio_mascota" value="Gato">Gato<label>
    <label><input type="radio" name="mascota" class="radio_mascota" value="Perico">Perico<label>
    <label><input type="radio" name="mascota" class="radio_mascota" value="Tortuga">Tortuga<label>

    <input type="text" class="campo_mascota" value="Vacio">
 </div>   

    <br>
    <br>

JAVASCRIPT

    let radio_fruta = document.querySelectorAll(".radio_fruta")
    let campo_fruta = document.querySelector(".campo_fruta")

    for(let i = 0; i < radio_fruta.length; i++){
    radio_fruta[i].addEventListener("click",function(){

    campo_fruta.value = radio_fruta[i].value

      })
    }

    //------------------------------------------------------------

    let radio_numero = document.querySelectorAll(".radio_numero")
    let campo_numero = document.querySelector(".campo_numero")

    for(let i = 0; i < radio_numero.length; i++){
    radio_numero[i].addEventListener("click",function(){

    campo_numero.value = radio_numero[i].value

      })
    }

    //------------------------------------------------------------

    let radio_mascota = document.querySelectorAll(".radio_mascota")
    let campo_mascota = document.querySelector(".campo_mascota")

    for(let i = 0; i < radio_mascota.length; i++){
    radio_mascota[i].addEventListener("click",function(){

    campo_mascota.value = radio_mascota[i].value

      })
    }

3 respuestas 3

2

el error que tienes es que no es la misma posicion del radio que la del input text, asi que no puedes usar la variable i para los dos.

Entonces para obtener la posicion del input text podrias dividir la posicion actual del radio entre el numero de radios que tiene cada grupo.

let radio = document.querySelectorAll(".radio")
let campo_checkButton = document.querySelectorAll(".campo_checkButton")

for (let i = 0; i < radio.length; i++) {
   radio[i].addEventListener("click", function() {

      // Obtener posicion del input
      numInputText = Math.floor(i / 4);

      campo_checkButton[numInputText].value = radio[i].value
   })
}
2

Por lo que puedo ver, el TypeError se está originando debido a que tu variable i en el for puede llegar a ser 12, y tan sólo tienes 3 inputs...

Cuando viene la asignación campo_checkButton[i].value = radio[i].value y el valor de i es 3, es cuando tira el error, una manera de comprobar esto es agregar la línea de código

console.log('Añadiendo listener a input: ', i);

De tal manera que verás los mensajes de 0 al 2 y en el 3 saldrá el error

0

Nunca creí que iba a funcionar, pero funciono.

let radio_fruta = document.querySelectorAll(".radio_fruta")
    let campo_fruta = document.querySelectorAll(".campo_fruta")

    for(let i = 0; i < radio_fruta.length; i++){
    radio_fruta[i].addEventListener("click",function(){

        for(let y = 0; y < campo_fruta.length; y++){
            campo_fruta[y].value = radio_fruta[i].value
            break;
        }

      })
    }

Agregue un for y le añadí un break para que asi pueda identificar al input hasta el orden correcto. GRACIAS A LOS QUE ME DIJERON CUAL ES EL ERROR.

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.