Как получить значение radio?

Question

[Valsin]

Здравствуйте, есть вот такой вот код. На данный момент при клике на кнопку, значение в консоль выводится, но как сделать так, чтобы значение выводилось сразу же при клике на radio-элемент?

<button class="selBtn">Click</button>
<input type="radio" name="rad" value="orange" class="u16-radop">
<input type="radio" name="rad" value="red" class="u16-radop">
<input type="radio" name="rad" value="green" class="u16-radop">

document.querySelector('.selBtn').onclick = () => {
	let radio = document.querySelectorAll('input[name="rad"]');
		for (let i = 0; i < radio.length; i++) {
			if (radio[i].checked) {
				console.log(radio[i].value);
		        }
	       }
}

Answer 1

[Rustam Azizov]

Используйте событие change.

Answer 2

[0xD34F]

О каких элементах идёт речь, по какому событию и что с ними делать:

const selector = 'input[name="rad"]';
const eventType = 'change';
const handler = e => console.log(e.target.value);

Слушаем событие непосредственно на элементах:

document.querySelectorAll(selector).forEach(n => {
  n.addEventListener(eventType, handler);
});

Или, применяем делегирование:

document.addEventListener(
  eventType,
  e => e.target.matches(selector) && handler(e)
);