Tengo tres entradas de radio y quiero dejar que las entradas de radio devuelvan el valor de las inputs y ejecuten una función cuando el usuario seleccione una opción.
Aquí está el código:
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> Gracias por la respuesta de Parthik Gosar , pude obtener el valor de radio input .
Pero el problema es document.querySelector('input[name="radios"]:checked').value obtendrá el valor de la radio input una vez que se cargue la página, que es null .
Me pregunto si hay alguna función integrada similar a onclick donde ejecutará una función cuando el usuario seleccione una opción u otras formas de resolver el problema.
¡Gracias por cualquier respuesta!
*Sé que podríamos usar document.getElementById('').checked para verificar, pero ejecutará la función cuando se cargue la página, lo que no funcionará para mí.,
Está buscando un oyente de clics. Simplemente adjunte un oyente al elemento de formulario (la delegación de eventos le permite agregar un oyente a un elemento principal y capturar eventos de elementos secundarios a medida que "burbujean" el DOM), y recoger el valor del botón en el que se hizo clic y registrarlo.
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>Debe envolver su código de inicialización en un oyente que se activa después de que se haya cargado la página (o simplemente coloque su javascript en la parte inferior de la página debajo del HTML).
window.addEventListener('DOMContentLoaded', () => { ... init code }) Además, puedes usar un condicional ? en caso de que no haya un valor marcado
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>