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
})
}