I have a form where based on which radio button is checked (Metric or Imperial), the two paragraphs should display either KG + CM or LBS + IN. Right now it just displays KG or LBS twice. Looking for a solution in vanilla JS. This is for a calculator I am working on.
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>You need to not work with event.target but rather find the element checked.
For the unit lookup, use a simple lookup map.
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>