Tengo un formulario en el que, según el botón de opción que se marca (métrico o imperial), los dos párrafos deben mostrar KG + CM o LBS + IN. En este momento solo muestra KG o LBS dos veces. Buscando una solución en vanilla JS. Esto es para una calculadora en la que estoy trabajando.
const paragraphWeightElement = document.querySelector(".js-paragraphWeight"); const paragraphHeightElement = document.querySelector(".js-paragraphHeight"); const form = document.querySelector(".js-form"); form.addEventListener("input", (event) => { paragraphWeightElement.innerText = event.target.value; paragraphHeightElement.innerText = event.target.value; }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script defer src="js/script.js"></script> <link href="css/style.css" rel="stylesheet" /> </head> <body> <form class="js-form"> <ul> <li> <label> <input class="js-metric" type="radio" value="KG" name="weight" /> Metric </label> </li> <li> <label class="form__label"> <input class="js-imperial" type="radio" value="LBS" name="weight" /> Imperial </label> </li> </ul> </form> <p class="js-paragraphWeight"></p> <p class="js-paragraphHeight"></p> </body> </html>No necesita trabajar con event.target , sino encontrar el elemento marcado.
Para la búsqueda de unidades, use un mapa de búsqueda simple.
const paragraphWeightElement = document.querySelector(".js-paragraphWeight"); const paragraphHeightElement = document.querySelector(".js-paragraphHeight"); const form = document.querySelector(".js-form"); const unitLookupMap = { metric: { weight: 'kg', height: 'meters' }, imperial: { weight: 'lbs', height: 'yards' }, } form.addEventListener("input", (event) => { const checked = form.querySelector('[name=units]:checked'); paragraphWeightElement.textContent = unitLookupMap[checked.value].weight; paragraphHeightElement.textContent = unitLookupMap[checked.value].height; }); <form class="js-form"> <ul> <li> <label> <input class="js-metric" type="radio" value="metric" name="units" /> Metric </label> </li> <li> <label class="form__label"> <input class="js-imperial" type="radio" value="imperial" name="units" /> Imperial </label> </li> </ul> </form> <p class="js-paragraphWeight"></p> <p class="js-paragraphHeight"></p>