时间戳

首页 > 解决方案 > 如果选中其中一个单选按钮，如何更改两段中的文本？JS

javascript - 如果选中其中一个单选按钮，如何更改两段中的文本？JS

问题描述

我有一个表单，根据选中的单选按钮（公制或英制），这两个段落应显示 KG + CM 或 LBS + IN。现在它只显示两次 KG 或 LBS。在 vanilla JS 中寻找解决方案。这是我正在研究的计算器。

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>

标签： javascripthtml

解决方案

您不需要使用event.target而是找到检查的元素。

对于单位查找，请使用简单的查找图。

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>

推荐阅读