Evaluating radio buttons in JavaScript

Question

I'm new to JavaScript and I'm trying to use the if statement to evaluate the selected radio button. It didn't work, so I'm asking if it's because I did something wrong or because it's not possible in JavaScript.

<form name = "f1">
    <input type = "radio" Name = "r1" Value = "Input" onClick="GetSelectedItem(this)">Input
    <input type = "radio" Name = "r1" Value = "Output" onClick ="GetSelectedItem(this)">Output

</form>


<script> 
var output = document.getElementById('output');
function GetSelectedItem(el) {
    output.innerHTML = el.value;
    if(output=="Input") 
       *** do stuff  *** ///
    else  if( output=="output") 
     ** do stuff2 ***

}
</script>

There's no element in the HTML you posted that has the id "output". — Pointy, Jan 13 '15 at 16:37
I think your code is somehow missed up ? Please check your syntax again or clarify more — Abdelrahman Elkady, Jan 13 '15 at 16:39
@Engine: No. But if you are trying to get a reference to an element with ID `output` (which you do with `document.getElementById('output');`), than an element with such an ID has to exist. — Felix Kling, Jan 13 '15 at 16:40

score 2 · Accepted Answer · answered Jan 13 '15 at 16:39

2

Doable, yes, but you need to fix a few issues:

output.innerHTML = el.value;
if(output=="Input")

In the if statement, you're actually checking for output, which is the element reference, not it's text or inner HTML. It should be:

if(output.innerHTML=="Input")

or just (if you're not using the output element for anything else but checking):

if(el.value=="Input")

See this example:

function GetSelectedItem(el) {
  if (el.value == "Input") {
    alert('input clicked');
  } else if (el.value == "Output") {
    alert('output clicked');
  }
}

<form name="f1">
  <input type="radio" Name="r1" Value="Input" onClick="GetSelectedItem(this)">Input
  <input type="radio" Name="r1" Value="Output" onClick="GetSelectedItem(this)">Output

</form>

answered Jan 13 '15 at 16:39

Shomz

37,421
4
57
85

have to wait 10 min to accept your answer ! – Engine Jan 13 '15 at 16:41
You're welcome! No problem about waiting, you can check the code example in the mean time. – Shomz Jan 13 '15 at 16:42
1

No problem. Note that you might want to use onchange listeners instead of onclicks because you can also check the buttons using the keyboard or by touching, etc. – Shomz Jan 13 '15 at 16:51
Thanks for the unexplained downvote, creep. – Shomz Jan 13 '15 at 17:45
wasn't me , and I really do have an issue with those down votes – Engine Jan 13 '15 at 19:38
1

I know it wasn't you, you seem like a nice guy and I'd never call *you* a creep (I upvoted your question long ago). Best of luck on your JS journey! :) – Shomz Jan 13 '15 at 19:42

score 1 · Answer 2 · answered Jan 13 '15 at 16:40

You can use just el.value

var output = document.getElementById('output');

function GetSelectedItem(el) {
    output.innerHTML = el.value;

    if (el.value == "Input") {
      alert(el.value);  
    } else if(el.value == "Output") {
      alert(el.value);
    }
}

Example

score 1 · Answer 3 · answered Jan 13 '15 at 16:45

1

Don't use == for comparision, rather use === as one checks for just value and the other checks for value and type.

I would write the function like this:

<script> 
function GetSelectedItem(el) {
    var output = document.getElementById('output');
    output.innerHTML = el.value;
    if( el.value === "Input")
    {
       *** do stuff  *** ///
    }
    else  if(el.value === "output") 
    {
     ** do stuff2 ***
    }    
}
</script>

answered Jan 13 '15 at 16:45

kheya

7,546
20
77
109

1

Generally, this is a good advice, but not that important here because there's nothing that would give different results between the two comparisons when comparing to string literals, like OP does in the question. I mean, there's no other type other than a string that could be evaluated to, say, `"Input"`, right? If it was an empty string or something, then yes, the things could get tricky with a simple comparison by value. :) – Shomz Jan 13 '15 at 16:54
This is ridiculous. You should NEVER use == in javascript coding. See more details here: http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons – kheya Jan 13 '15 at 23:24
Before saying something's ridiculous, think. Read answers on that link, then read my comment, carefully. Then read those answers again, carefully, especially this part and below: `The special case is when you compare a literal with an object that evaluates to the same literal, due to its toString or valueOf method. For example, consider the comparison of a string literal with a string object created by the String constructor.` – Shomz Jan 14 '15 at 00:18

Evaluating radio buttons in JavaScript

3 Answers3