获取单选按钮值并添加到 innerHTML 脚本答案

【问题标题】：Get radio buttons values and add to innerHTML script获取单选按钮值并添加到 innerHTML 脚本
【发布时间】：2018-03-17 08:01:46
【问题描述】：

我有一个包含文本、下拉菜单和单选按钮的表单。我有一个脚本，它可以获取值并在文本区域字段中显示值。我可以获取文本和下拉菜单的值，但单选按钮总是返回未定义错误或对象节点列表错误。这是我在表单标签中所做的示例代码：

<form>
<input type="text" id="name" onChange="mySummary();" />
<input type="text" id="phone" onChange="mySummary();" />
<input type="radio" name="contact" value="Spoke with" onChange="mySummary();" />
<input type="radio" name="contact" value="left voicemail" onChange="mySummary();" />
<input type="text" id="moreinfo" onChange="mySummary();" />
<textarea id="Summary" rows="10" cols="30"></textarea>
</form>

然后我在我的 JavaScript 中调用数据如下：

function mySummary() {
var a = document.getElementById("name").value;
var b = document.getElementById("phone").value;
var c = document.getElementsByName("contact").value;
var d = document.getElementById("moreinfo").value;
document.getElementById("Summary").innerHTML = 
"Name: " + a + "\n" +
"Phone: " + b + "\n" +
"Contacted How: " + c + "\n" +
"Additional information" + d;
}

当我尝试使用上面的选项时，我收到未定义的消息 doe 单选选项。

如何提取为单选按钮选择的值，并且该值更改为用户的新选择，输出也会更改。我已经搜索过，但没有找到一个在 innerHTML 中使用的其他 id

【问题讨论】：

标签： javascript dom innerhtml getelementbyid getelementsbyname

【解决方案1】：

您可以遍历名称为contact 的单选按钮组中的所有单选按钮，并检查选中了哪个单选按钮。然后，在变量c 中设置该单选按钮的值：

function mySummary() {
  var a = document.getElementById("name").value;
  var b = document.getElementById("phone").value;
  var radioBtn = document.getElementsByName("contact");
  var c;
  for(i=0; i<radioBtn.length; i++){
   if(radioBtn[i].checked){
     c = radioBtn[i].value;
   }
  }
  
  var d = document.getElementById("moreinfo").value;
  document.getElementById("Summary").innerHTML = 
  "Name: " + a + "\n" +
  "Phone: " + b + "\n" +
  "Contacted How: " + c + "\n" +
  "Additional information" + d;
}

<form>
<input type="text" id="name" onChange="mySummary();" />
<input type="text" id="phone" onChange="mySummary();" />
<input type="radio" name="contact" value="Spoke with" onChange="mySummary();" />
<input type="radio" name="contact" value="left voicemail" onChange="mySummary();" />
<input type="text" id="moreinfo" onChange="mySummary();" />
<textarea id="Summary" rows="10" cols="30"></textarea>
</form>

【讨论】：

@Michael 很高兴为您提供帮助。

【解决方案2】：

document.getElementsByName 顾名思义，它以数组的形式返回多个 items ，因此代码中 'c' 的值将是一个数组，但是由于单选按钮通常用于在 2 个选项之间进行选择，并且单选按钮也只有 2 个选项，因此您也可以为单个单选按钮设置 id，并通过使用 getElementById 获取对它的引用并检查其“checked”属性以找出单选按钮是否被选中，或者你也可以循环。

【讨论】：