How to change text in two paragraphs if one of the radio buttons is checked? JS-CodePudding

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>

CodePudding user response：

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>