如何为收音机创建显示值

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

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

Answer 2

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 3

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>

如何为收音机创建显示值

How to create a display value for a radio

html

javascript

radio-button