Как создать отображаемое значение для радио

Question

<input type="radio" id="color1" name="color" value="blue">Blue<br>
<input type="radio" id="color2" name="color" value="red">Red<br><br>

<button type="button" onclick="displayFunction()">Display</button>
<div id="display"></div> 

function displayFunction() {
   if document.getElementById(color1).checked) {
      color_value = document.getElementById(color1).value;
   } else if (document.getElementById('color2).checked) { 
      color_value= document.getElementById('color2 ').value
   }

Я пытаюсь отобразить значение выбранного радиокнопки, но я не уверен, почему он не работает? и когда он работает, он отключает мои другие кнопки

<input type="radio" id="color1" name="color" value="blue">Blue<br>
<input type="radio" id="color2" name="color" value="red">Red<br><br>

<button type="button" onclick="displayFunction()">Display</button>
<div id="display"></div> 

function displayFunction() {
   if document.getElementById(color1).checked) {
      color_value = document.getElementById(color1).value;
   } else if (document.getElementById('color2).checked) { 
      color_value= document.getElementById('color2 ').value
   }

I tried this, but it is displaying the javascript on the page. Any suggestions?

Answer 1

theForm.oninput =()=> {
  displayColor.textContent = theForm.colorN.value
}

label,
div {
  display: block; 
  float: left; 
  clear: both; 
  margin: 1em;
}

<form id="theForm">

  <label title="Blue"><input type="radio" name="colorN" value="blue">Blue</label>

  <label title="Red"><input type="radio" name="colorN" value="red">Red</label>

</form>

<div id="displayColor">x</div>

Answer 2

function displayFunction() {
   var color_value = "";
   if(document.getElementById("color1").checked) {
  color_value = document.getElementById("color1").value;
   } else if (document.getElementById("color2").checked) { 
  color_value= document.getElementById('color2').value;
   }
  console.log(color_value);
}

<input type="radio" id="color1" name="color" value="blue">Blue<br>
<input type="radio" id="color2" name="color" value="red">Red<br><br>

<button type="button" onclick="displayFunction()">Display</button>
<div id="display"></div> 

Answer 3

function displayFunction()
{
   if(document.getElementById('color1').checked)
   {
     document.getElementById('display').innerHTML = document.getElementById('color1').value;
   }

   else if(document.getElementById('color2').checked)
   {
     document.getElementById('display').innerHTML = document.getElementById('color2').value;
   }
}