将两个输入值变为一个

Question

当厘米被选择为选项时，我尝试将两个输入框更改为一个输入框到一个输入框到厘米。它适用于英尺和英寸，但当用户选择厘米时我只需要一个输入。如何使用 javascript 更改它？

 <form action=" " onsubmit="">Enter your Height:
  <input type="text" id="height"> </input> 
  Feet <input type="text" id="height2"> </input>Inches
    <select id = "typeH">
        <option value = "feet">Feet/Inches</option>
        <option value = "cm">Centimeter</option>
    </select>

这是我的 js 代码中的一个函数：

function calculateBMI() {
  var weight = document.getElementById('weight').value;
  var height = document.getElementById('height').value;
  var height2 = document.getElementById('height2').value;
  var typeW = document.getElementById("type").value;
  var typeH = document.getElementById("typeH").value;
  if (typeW === "lbs") {
    weight = weight * 0.45;
  } else if (typeW === "kg") {
    weight = weight;
  }
  if (typeH === "feet") {
    height = height * 0.3048;
    height2 = height2 * 0.0254;
    var totalheight = height + height2;
  } else if (typeH === "cm") { //this is the part where i want to change the two input boxes to one if the user selects cm as type of height
    typeH.addEventListner("click", change());
    //change();
    height = height * 0.0328084;
    height2 = 0;
    var totalheight = height + height2;
  }
  var total = weight / (totalheight * totalheight);
  roundToTwo(total);
  document.getElementById('result').value = roundToTwo(total);
}

Answer 1

您需要一些 javascript。这是一个快速而肮脏的解决方案，也使用 CSS：

document.getElementById('typeH').addEventListener('change', function(e) {
    var el = e.target;
    // Mark all of them as hidden
    for(var i = 0; i < el.options.length; i++) {
      var spanEl = document.getElementById(el.options[i].value);
      spanEl.className = 'hidden';
      // Reset all of the input options
      var inputs = spanEl.querySelectorAll('input');
      for(var j = 0; j < inputs.length; j++) {
        inputs[j].value = '';
      }
    }
    // Show the one that was selected
    document.getElementById(el.options[el.selectedIndex].value).className = '';
  });

.hidden {
    display: none;
}

<form action="" onsubmit="">
  <span>Enter your Height:</span>
  <span id="feet"><!-- This id must match the value in the select option -->
    <input type="text" id="heightInFeet" name="heightInFeet"></input> Feet
    <input type="text" id="heightInInches" name="heightInInches"></input> Inches
  </span>
  <span id="cm" class="hidden">
    <input type="text" id="heightInCentimeters"></input> Centimeters
  </span>
  <select id="typeH">
    <option value="feet">Feet/Inches</option><!-- This value must match the id of the span -->
    <option value="cm">Centimeters</option>
  </select>
</form>

在 Javascript 中，我们为 #typeH 选择元素的 change 事件添加了一个事件监听器。 （这相当于在 HTML 中的 onChange 属性内嵌一个函数。）

在 CSS 中，我们只是添加一个隐藏不相关元素的类。

在 HTML 中，我们重新组织了 DOM 树，以便将输入和文本部分（即英尺/英寸和厘米）放入包装器 span 元素中。这样在 javascript 中，我们可以隐藏 span 中的所有输入，然后在所选选项上“显示”（或者更确切地说，删除 hidden 类）。

希望这对你有教育意义。

Answer 2

除了您用于计算weight 和height 值的代码之外，您还需要使用其他代码来处理隐藏/显示情况。

您需要在select 元素上绑定onchange 事件，您将根据所选值隐藏/显示第二个input。

在您的 JS 中创建以下函数：

function filterHeight(select) {
  if (select.value !== "feet") {
    document.getElementById("height2").style.display = "none";
  } else {
    document.getElementById("height2").style.display = "block";
  }
}

document.getElementById("height2") 用于引用第二个输入，.style.display 用于隐藏/显示它。

然后在你的 HTML 中添加 onchange="filterHeight(this)" 到 select 元素：

<select id="typeH" onchange="filterHeight(this)">

其中this 指的是select 元素本身，因此您可以在回调函数中访问它的值。

演示：

这是一个工作演示 sn-p：

function filterHeight(select) {
  if (select.value !== "feet") {
    document.getElementById("height2").style.display = "none";
  } else {
    document.getElementById("height2").style.display = "block";
  }
}

<form action=" " onsubmit="">Enter your Height:
  <input type="text" id="height"> </input>
  Feet <input type="text" id="height2"> </input>Inches
  <select id="typeH" onchange="filterHeight(this)">
    <option value="feet">Feet/àInches</option>
    <option value="cm">Centimeter</option>
  </select>