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

Question

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

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

当我尝试使用上面的方法时，我收到了关于单选选项的未定义消息。

如何拉取为单选按钮选择的值，以及如何将值更改为用户的新选择，输出也会更改。我已经搜索过但没有找到在 innerHTML 中与其他 ids

一起使用的

Answer 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>

Answer 2

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

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

Get radio buttons values and add to innerHTML script

javascript

dom

innerhtml

getelementbyid

getelementsbyname