How do you reference the checked value in a radio input control for a javascript function?

Question

I need the output element of an html form to display content that is based off whatever item is checked from a radio button set. When I only need to display which value is checked it works fine, but when I try to use a function to switch the output, the if statement doesn't work - the function always returns 'Farenheit' as though option.value remains 'celcius' (regardless of how often the option buttons are swapped):

<script>
    function switchOpt(opt){
        if (opt='celcius'){
        return 'Farenheit';
        }else{
        return 'Celcius';
        }
    }
</script>
<form oninput="swap.value=switchOpt(option.value)">
    <input type="radio" name="option" value="celcius" checked /> Celcius <br />
    <input type="radio" name="option" value="farenheit" /> Farenheit <br />
    <output name="swap"></output>
</form>

The same setup for the if statement works in other functions, so I'm guessing the problem is that there's a datatype mismatch or something in how I'm trying to refer to the values here.

How do you refer to the checked value in a set of radio buttons within a function?

sidenote: Fahrenheit is the correct spelling. :)

i alarmed alien
– i alarmed alien

2018-08-10 10:49:26 +00:00
Commented Aug 10, 2018 at 10:49 — i alarmed alien
– i alarmed alien, Commented Aug 10, 2018 at 10:49

ConsoleLog · Accepted Answer · 2018-08-12 10:35:04Z

2

function switchOpt(opt) {
  if (opt == 'farenheit') {
    return 'Farenheit';
  } else {
    return 'Celcius';
  }
}

<form oninput="swap.value=switchOpt(option.value)">
  <input type="radio" name="option" value="celcius" checked /> Celcius <br />
  <input type="radio" name="option" value="farenheit" /> Farenheit <br />
  <output name="swap"></output>
</form>

Note the change in the if condition...

=== operator checks both value and type whereas == only compares the value. For example, 3 == '3' will return true even though one is a string and the other is a number and to avoid this should use ===. Therefore, I’d say it’s safer to use the former although I did use == here :) Single = is for assigning. For example var x = document.getElementById(‘box’);

edited Aug 12, 2018 at 10:35

answered Aug 10, 2018 at 11:01

ConsoleLog

5113 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Isaac Reefman Over a year ago

In light of the difference between these two answers, could you share why you’d use == instead of ===?

ConsoleLog Over a year ago

=== operator checks both value and type whereas == only concerns with the value. I’d say it’s safer to use the former although I did use == here :)

ConsoleLog Over a year ago

It’s for assigning. For example var x = document.getElementById(‘box’);

Isaac Reefman Over a year ago

aaahhhhh! It all makes sense now! Now I want to give your answer the tick because of all the in-comments help you've added, even though the other one is a little more complete... Tell you what, Throw in this info into an update of your answer and you've got it.

ConsoleLog Over a year ago

Sorry, I should have been more elaborative - I've updated the answer now. Cheers

Emil Alkalay · Accepted Answer · 2018-08-10 11:05:15Z

0

You should use === in your if clause instead of =.

In addition always add labels for your radio buttons and checkboxes.

<script>
    function switchOpt(opt){
        if (opt==='celcius'){
        return 'Farenheit';
        }else{
        return 'Celcius';
        }
    }
</script>
<form oninput="swap.value=switchOpt(option.value)">
    <input type="radio" name="option" id="celcius" value="celcius" checked /> <label for="celcius">Celcius</label> <br />
    <input type="radio" name="option" id="farenheit" value="farenheit" /><label for="farenheit"> Farenheit</label> <br />
    <output name="swap"></output>
</form>

answered Aug 10, 2018 at 11:05

Emil Alkalay

4964 silver badges16 bronze badges

2 Comments

Isaac Reefman Over a year ago

In light of the difference between these two answers, could you share why you’d use === instead of ==?

Emil Alkalay Over a year ago

true == 'true' will return true, true === 'true' will return false. === is strict comparison. Good practice is to use strict comparson, because == sometimes leads problems which are hard to analyze. Just enter === in google and you will read enough about this.

Collectives™ on Stack Overflow

How do you reference the checked value in a radio input control for a javascript function?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related