Me gustaría saber que puedo hacer para que los input radio funcione con su respectivo input text, ya que los 4 botones interactuan con un mismo input text y me causa conflicto a la hora de realizar un formulario mas grande. Espero y puedan ayudarme y gracias de antemano.
//esperamos a que cargue el DOM
document.addEventListener('DOMContentLoaded', function() {
//seleccionamos los inputs tipo radio, recuerda que
//esto te trae un HTMLCollections, así que lo tienes que recorrer con un for
let inputs = document.querySelectorAll('input[type="radio"]');
//console.log(inputs[0]);
//cremos el for
for (let i = 0; i < inputs.length; i++)
//le agregamos a cada iteración un addEventListener de tipo change
//como su nombre lo indica al momento de cambiar de input tomará su valor
inputs[i].addEventListener('change', function() {
//Validamos que ese input tenga el atributo checked
if (this.checked) {
//si es así obtenemos su valor y lo agregamos al input.
document.getElementById("rInput").value = this.value;
}
})
})
<head>
<meta charset="utf-8">
<title>javascript - Obtain the value of a radio button</title>
</head>
<body>
<h1>Obtain the value of a radio button</h1>
<form id="form1">
<p>Deacuerdo: Si<input type="radio" name="deacuerdo" value="si"> No<input type="radio" name="deacuerdo" value="no"></p>
<div id="resultado"><input id="rInput" type="text"></div>
<p>Enterado: Si se<input type="radio" name="enterado" value="si se"> No se<input type="radio" name="enterado" value="no se"></p>
<div id="resultados"><input id="eInput" type="text"></div>
</form>
</body>
</html>