Javascript + HTML return in a field

Question

On this HTML page I defined some items

/**
 * Botão Submit
 */
document.getElementById("btnSubmit").onclick = function() {
  var radios = document.getElementsByName("band-rock");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      alert("Escolheu: " + radios[i].value);
      //var nome = +radios[i].value.InnerHTML; 
      //console.log("Escolheu: " + radios[i].value);

    }
  }
};


/**
 * Botão Load
 */
document.getElementById("btnLoad").onclick = function() {
  var radios = document.getElementsByName("band-rock");

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].value === "The Beatles") {
      radios[i].checked = true;
    }
  }
};

<form action="form-action.php" method="post">
  <p>
    <input type="radio" name="band-rock" value="Beatles" />The Beatles
    <input type="radio" name="band-rock" value="Led Zeppelin" /> Led Zeppelin
    <input type="radio" name="band-rock" value="Pink Floyd" />Pink Floyd
    <input type="radio" name="band-rock" value="Black Sabbath" />Black Sabbath
  </p>
  <p>
    <input type="button" id="btnSubmit" value="Submit me!" />
    <input type="button" id="btnLoad" value="Load!" />
  </p>
  <p>
    <input type="text" id="texto" name="band-rock" value="" disabled/>
  </p>
</form>

How do I return instead of in Alert I return in input field???

Answer 1

Just like that:

/**
 * Botão Submit
 */
document.getElementById("btnSubmit").onclick = function() {
  var radios = document.getElementsByName("band-rock");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      //alert("Escolheu: " + radios[i].value);
      //var nome = +radios[i].value.InnerHTML; 
      //console.log("Escolheu: " + radios[i].value);
      // ##### AQUI O QUE VOCÊ PERGUNTOU #####
      document.getElementById('texto').value = radios[i].value;
     // ##### RESPOSTA ACIMA #####
    }
  }
};


/**
 * Botão Load
 */
document.getElementById("btnLoad").onclick = function() {
  var radios = document.getElementsByName("band-rock");

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].value === "The Beatles") {
      radios[i].checked = true;
    }
  }
};

<form action="form-action.php" method="post">
  <p>
    <input type="radio" name="band-rock" value="Beatles" />The Beatles
    <input type="radio" name="band-rock" value="Led Zeppelin" /> Led Zeppelin
    <input type="radio" name="band-rock" value="Pink Floyd" />Pink Floyd
    <input type="radio" name="band-rock" value="Black Sabbath" />Black Sabbath
  </p>
  <p>
    <input type="button" id="btnSubmit" value="Submit me!" />
    <input type="button" id="btnLoad" value="Load!" />
  </p>
  <p>
    <input type="text" id="texto" name="band-rock" value="" disabled/>
  </p>
</form>

Answer 2

Thiago, I made some changes to your HTML code, adding label tags related to radios to improve usability (For attribute of the label with value equal to the Radio Id attribute). I changed the value of Beattles radio to The Beattles. I removed the disabled input to allow typing the band name and at the click of the load button the corresponding radio is marked. To change the value of an input just use the .value, Just like he was doing with the radios. Follow the code below:

/**
 * Botão Submit
 */
document.getElementById("btnSubmit").onclick = function() {
  var radios = document.getElementsByName("band-rock");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      //alert("Escolheu: " + radios[i].value);
      //var nome = +radios[i].value.InnerHTML; 
      //console.log("Escolheu: " + radios[i].value);
      document.getElementById("texto").value = radios[i].value; // adicione essa linha de código
    }
  }
};


/**
 * Botão Load
 */
document.getElementById("btnLoad").onclick = function() {
  var radios = document.getElementsByName("band-rock");

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].value === document.getElementById("texto").value) {
      radios[i].checked = true;
    }
  }
};

<form action="form-action.php" method="post">
  <p>
    <input id="The Beatles" type="radio" name="band-rock" value="The Beatles" />
    <label for="The Beatles">The Beatles</label>
    <input id="Led Zeppelin" type="radio" name="band-rock" value="Led Zeppelin" />
    <label for="Led Zeppelin">Led Zeppelin</label>
    <input id="Pink Floyd" type="radio" name="band-rock" value="Pink Floyd" />
    <label for="Pink Floyd">Pink Floyd</label>
    <input id="Black Sabbath" type="radio" name="band-rock" value="Black Sabbath" />
    <label for="Black Sabbath">Black Sabbath</label>
  </p>
  <p>
    <input type="button" id="btnSubmit" value="Submit me!" />
    <input type="button" id="btnLoad" value="Load!" />
  </p>
  <p>
    <input type="text" id="texto" name="band-rock" value=""/>
  </p>
</form>