CODEWITHSUNDEEP
javascripthtml
j.turn
j.turn

Reputation: 3

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

Hello I'm new to JavaScript and trying to get a radio button to be registered on variable and then have that variable return another var but it just keeps being returned undefined. If I'm just doing something overtly wrong please tell me.

The radio buttons

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

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

And my final place its supposed to be submitting.

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

Upvotes: 0

Views: 34

Answers (2)

Shubham
Shubham

Reputation: 1793

I think this will give you clarity.

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>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

Add change event listener for all radio inputs and on change of the input, set the value of the textbox.

Document.querySelectorAll Returns a list of the elements within the document that match the specified group of selectors.

Try this:

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

Upvotes: 1

Related Questions