尝试选择哪个单选按钮以及何时通过代码放置它返回未定义

Trying to take which radio button is selected and when is put it through code is returns undefined

本文关键字：代码 未定义 返回 何时通 选择 单选按钮      更新时间：2023-09-26

你好，我是 JavaScript 的新手，并试图在变量上注册一个单选按钮，然后让该变量返回另一个变量，但它只是一直返回未定义。如果我只是做了一些明显错误的事情，请告诉我。

单选按钮

Fighter:<input type="radio" id="fig" value="1"/>
Cleric:<input type="radio" id="cleric" value="2"/>
Sorcerer:<input type="radio" id="wiz" value="3"/>

我的 JS

var lvl
var bab
if (document.getElementById('fig').checked) {
var cass = document.getElementById('fig').value;
if (cass == 1){
bab = 1;
} 
else if (cass == 2){
bab = 2;
} 
else{
bab = 3;
} 
}
function show(){
var txtOutput = document.getElementById("txtOutput");
txtOutput.value = bab;
}

而我的最后一个地方应该是提交。

<input id="txtOutput">
    </input>

为所有radio输入添加change事件侦听器，并在输入change设置文本框的值。

Document.querySelectorAll 返回文档中与指定的选择器组匹配的元素的列表。

试试这个：

var elems = document.querySelectorAll('[name="name"]');
Array.prototype.forEach.call(elems, function(elem) {
  elem.addEventListener('change', function() {
    document.getElementById("txtOutput").value = this.value;
  });
});
Fighter:
<input type="radio" id="fig" value="1" name='name' />Cleric:
<input type="radio" id="cleric" value="2" name='name' />Sorcerer:
<input type="radio" id="wiz" value="3" name='name' />
<br>
<input id="txtOutput">

我认为

这会让你清楚。

var lvl = "";
var bab = "";
function getValues() {
  if (document.getElementById('fig').checked) {
    bab = "1 : " + document.getElementById('fig').value + "'n";
  }
  if (document.getElementById('cleric').checked) {
    bab += "2 : " + document.getElementById('cleric').value + "'n";
  }
  
  if((document.getElementById('wiz').checked)){
    bab += "3 : " + document.getElementById('wiz').value;
  }
  
  show();
}
function show(){
  var txtOutput = document.getElementById("txtOutput");
  txtOutput.innerHTML = bab;
}
/* or you can call it when you click on it */
function consoleIt(obj) {
  console.log(obj.id + " : " + obj.value);
 }
Fighter  : <input type="radio" onclick="consoleIt(this);" id="fig" value="1"/>
Cleric   : <input type="radio" onclick="consoleIt(this);" id="cleric" value="2"/>
Sorcerer : <input type="radio" onclick="consoleIt(this);" id="wiz" value="3"/>
<button onclick="getValues();">Get Radio Data</button>
<textarea id="txtOutput"> </textarea>

相关文章：