尝试选择哪个单选按钮以及何时通过代码将返回undefined

时间:2016-02-12 05:12:52

标签: javascript html

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

收音机按钮

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>

2 个答案:

答案 0 :(得分:1)

  

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

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

试试这个:

&#13;
&#13;
var elems = document.querySelectorAll('[name="name"]');
Array.prototype.forEach.call(elems, function(elem) {
  elem.addEventListener('change', function() {
    document.getElementById("txtOutput").value = this.value;
  });
});
&#13;
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">
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我认为这会让你清晰。

&#13;
&#13;
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);
 }
&#13;
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>
&#13;
&#13;
&#13;