JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
	<title>Form de exemplo com radios</title>
	<meta charset="utf-8">
</head>

<body>
	<form action="form-action.php" method="post">
		<p>
			<input type="radio" name="band-rock" value="The 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>
			<button id="btnSubmit">Submit me!</button>
			<button id="btnLoad">Load!</button>
		</p>
		
		<p>
			<input type="text" id="texto" value="" disabled/>
		</p>
	</form>
	
</body>

</html>

JavaScript

document.getElementById('btnSubmit').onclick = function btnSubmit(event){

	//Previne a ação submit de ser acionada ao clicar no botao
	event.preventDefault();
  
  //Seleciona todos elementos input do tipo radio com nome 'band-		rock' e os armazena num array 
    let valorDoInputRadio = document.getElementsByName('band-rock');

  
	// Laço de repetição que retorna o valor do input radio 					selecionado enquanto houver valores para retornar
  for(var i = 0; i < valorDoInputRadio.length; i++)
  {
  
  //Condição que verifica se o input radio foi selecionado, cabe 		aqui uma outra observação getElements e getElement são 						diferentes, getElements retorna um array com os elementos 				selecionados, já o getElement seleciona apenas o elemento 				selecionado
  
    if (valorDoInputRadio[i].checked)
    {
      alert(valorDoInputRadio[i].value);
    }
  
	}
}

document.getElementById('btnLoad').onclick = function btnSubmit(event){

	//Previne a ação submit de ser acionada ao clicar no botao
	event.preventDefault();
  
  //Seleciona todos elementos input do tipo radio com nome 'band-		rock' e os armazena num array 
    let valorDoInputRadio = document.getElementsByName('band-rock');
  //Selecionamos também o valor do input o qual vamos inserir o valor do input radio selecionado
  	let campoTxt = document.getElementById('texto');

  
	// Laço de repetição que retorna o valor do input radio 					selecionado enquanto houver valores para retornar
  for(var i = 0; i < valorDoInputRadio.length; i++)
  {
  
  //Condição que verifica se o input radio foi selecionado, cabe 		aqui uma outra observação getElements e getElement são 						diferentes, getElements retorna um array com os elementos 				selecionados, já o getElement seleciona apenas o elemento 				selecionado
  
    if (valorDoInputRadio[i].checked)
    {
    // Aqui nós inserimos ao input que contem o campo para texto o 				valor que será exibido de acordo com a opção selecionada
    //Pegamos então a variavel que...