are there some built-in function like onclick for radio input?

Question

I have three radio inputs and I want to let the radio inputs return the value of the inputs uand execute a function when user selects one option.

Here is the code:

console.log(document.querySelector('input[name="radios"]:checked').value);

 <form>
 <input type="radio"  id='HTML'name="radios" value="HTML">HTML<br>
<input type="radio" id="css" name="radios"  value="CSS">CSS<br>
<input type="radio" id="javascript" name="radios" value="JavaScript">Javascript<br>
</form>

Thanks for the answer from Parthik Gosar, I could get the value from radio input.

But the problem is document.querySelector('input[name="radios"]:checked').value will get the value from the radio input once the page loaded which is null.

I just wonder is there some built-in function similar to onclick where it will execute a function when user select an option or other ways to solve the problem?

Thanks for any responds!

*I know we could use document.getElementById('').checked to check, but it will execute the function when the page loaded which will not work for me.,

Just move your JS code after radio buttons – Soroush Bgm Dec 18 '21 at 18:09 — Soroush Bgm, Dec 18 '21 at 18:09

score 1 · Answer 1 · answered Dec 18 '21 at 18:10

You need to wrap your initialization code in a listener that fires after the page has loaded (or just put your javascript at the bottom of the page under the HTML).

window.addEventListener('DOMContentLoaded', () => {
  ... init code
})

Also, you can use a conditional ? in case there isn't a checked value

  console.log(document.querySelector('input[name="radios"]:checked')?.value);

window.addEventListener('DOMContentLoaded', () => {
  console.log(document.querySelector('input[name="radios"]:checked')?.value);
})

 <form>
 <input type="radio"  id='HTML'name="radios" value="HTML">HTML<br>
<input type="radio" id="css" name="radios"  value="CSS">CSS<br>
<input type="radio" id="javascript" checked name="radios" value="JavaScript">Javascript<br>
</form>

Thanks for the answer, but I think this will automactially give the value to `Javascript`. Is there way to solve this problem? — Sahil, Dec 18 '21 at 18:21

Andy · Accepted Answer · 2021-12-18T18:25:51.280

You are looking for a click listener. Just attach one listener to the form element (event delegation allows you to add a listener to a parent element and capture events from child elements as they "bubble up" the DOM), and pick up the value of the clicked button and log it.

const form = document.querySelector('form');

form.addEventListener('click', handleClick, false);

// Because you're using event delegation the parent
// will watch for _all_ events from its children.
// So if you only want to watch for events from
// just the input buttons you need to grab the nodeName
// of the clicked element and then check to see if
// it's an input button before you do anything else
function handleClick(e) {
  const { nodeName, value } = e.target;
  if (nodeName === 'INPUT') {
    console.log(value);
  }
}

<form>
  <input type="radio" id='HTML' name="radios" value="HTML">HTML<br>
  <input type="radio" id="css" name="radios" value="CSS">CSS<br>
  <input type="radio" id="javascript" name="radios" value="JavaScript">Javascript<br>
</form>

It is very helpful, but the only problem is that if I just click on the text (Javascript/Css/HTML), the function will execute as well and will return `undefined`. Is there way that is could avoid this happens? — Sahil, Dec 18 '21 at 18:20

are there some built-in function like onclick for radio input?

2 Answers2