How do you call different javascript functions dependent on which radio button is selected?

Question

I'm trying to call different javascript functions to run in my html from the selection of radio buttons. I currently have 3 buttons and I want them to run after a button is clicked.

My current HTML is:

<button class="button" onclick="runScript();">Run</button>

<input name="radioButton" type="radio" value="1"> Option 1
<input name="radioButton" type="radio" value="2"> Option 2
<input name="radioButton" type="radio" value="3"> Option 3

I want all 3 options to run separate functions, such as if value="1" then run function 1, etc. It's not a lot but as for my javascript I currently have:

function runScript() {
    var x = document.getElementsByName("radioButton").value;
}

Any ideas on how I can get the functions to run like this?

Thanks for the comment @Barmar could you give me a little more context about this? — briannelson95, Oct 26 '20 at 21:18
What more do you need to know? Inside the switch you can use `case "1": func1(); break; case "2": func2(); ...` — Barmar, Oct 26 '20 at 21:19
I didn't even know about switch, where would I put that in my code? — briannelson95, Oct 26 '20 at 21:34
It's like a series of `if` statements, so you put it where you would have put an `if` statement to call the function you want. — Barmar, Oct 26 '20 at 21:35
See https://www.tutorialspoint.com/javascript/javascript_switch_case.htm — Barmar, Oct 26 '20 at 21:37
So it would be something like this? `function runScript { switch ($(":radio[name=radioButton]:checked").val(1)) case "1": func1();` — briannelson95, Oct 26 '20 at 21:38
`.val(1)` is for setting the value. If you want to get the value use just `.val()` like I showed above and like in the duplicate function. — Barmar, Oct 26 '20 at 21:40
`function runScript() { switch ($(":radio[name=radioButton]:checked").val()) { case "1": func1(); break; case "2": func2(); break; case "3": func3(); break; } }` — Barmar, Oct 26 '20 at 21:41

chad_ · Answer 1 · 2020-10-26T21:27:39.090

0

You could get the value of the selected item with a line like this:

var x = document.querySelector('input[name="radioButton"]:checked').value

instead of:

var x = document.getElementsByName("radioButton").value;

That being said, I would generally not access value until you're sure your query selector found anything, or you'll get an exception.

edited Oct 26 '20 at 21:27

answered Oct 26 '20 at 21:18

chad_

3,749
2
22
22

You're missing `.value` – Barmar Oct 26 '20 at 21:20
thanks.. I'd probably not check the value right where I do the querySelector, but for the sake of the example, it's true.. really we should check if the querySelector found anything, and then get the value. – chad_ Oct 26 '20 at 21:28
Using jQuery would make it shorter and also avoid the error of trying to get the property of null. – Barmar Oct 26 '20 at 21:30
I'd found my way to the question through the javascript tag and didn't realize it was a jquery question until you just pointed that out. oops. I prefer straight js, but contextually you're right. My bad. – chad_ Oct 26 '20 at 21:31

How do you call different javascript functions dependent on which radio button is selected?

1 Answers1