[JavaScript] radio버튼 이벤트리스너 예제(eventLitner)

jQuery만 사용하다가 순수 자바스크립트를 사용해보려니 익숙하지가 않네요. 

스스로 기억하기 위해 기록해 봅니다. 

<!-- index.html -->

<script defer src="radio.js"></script>


<div>
	<label>
		<input type="radio" name="containerType" value="none" />none
	</label>
	<label>
		<input type="radio" name="containerType" checked value="flex" />flex
	</label>
	<label>
		<input type="radio" name="containerType" value="inline-flex" />inline-flex
	</label>
	<label>
		<input type="radio" name="containerType" value="flexbox" />inline-flexbox
	</label>
</div>

// radio.js

window.onload = function(){
	const radios = document.querySelectorAll("input[name='like']");
	const txt = document.querySelector("#txt");

	radios.forEach((radio) => {
		radio.addEventListener("change", (e) => {
			const current = e.currentTarget;
			if(current.checked){
				txt.textContent = `좋아하는 음식은 ${current.value}입니다`;
			}
		});
	});
};