javascript - 选择新选项时动态刷新

Question

我正在尝试使用 JavaScript 进行长度转换。我无法解决的问题是这样的。当用户加载页面时没有问题，并且 JavaScript 可以正常工作。但当他选择另一个选项，即厘米时，仍在计算米。

这是要测试的地址:http://martinpechacek.cz/convert/

<h2>Lenght</h2>
<p>
  <input id="input" type="number" placeholder="" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)"> 

  From:
  <select id="from" name="from">
    <option id="from_meter" value="meter">meter</option>
    <option id="from_centimeter" value="centimeter">centimeter</option>
  </select> 

  To:
  <select id="to" name="to">
    <option id="to_kilometer" value="kilometer">kilometer</option>
  </select>
</p>
<p>Result: <span id="result"></span></p>

var idfrom = "meter";
var idto = "kilometer";

$("#from").change(function() {
  idfrom = $("#from").val();
});

$("#to").change(function() {
    idto = $("#to").val();
});

if (document.getElementById('from').value == "meter" && document.getElementById('to').value == "kilometer") {
  function LengthConverter(valNum) {
    document.getElementById("result").innerHTML = valNum / 1000;
  }
}

if (document.getElementById('from').value == "centimeter" && document.getElementById('to').value == "kilometer") {
  function LengthConverter(valNum) {
    document.getElementById("result").innerHTML = valNum / 100000;
  }
}

Answer 1

您的问题是执行转换的逻辑仅在页面加载时执行。为了使其在值更改时工作，您需要 Hook 这些事件并在那里运行计算。

您还可以通过检索执行计算的函数中的所有所需值来简化逻辑。最后，您应该删除过时的 on* 事件属性。请改用不显眼的事件处理程序。试试这个:

$("#from, #to").on('change', calculate);
$('#input').on('input', calculate);
calculate(); 

function calculate() {
  var divisor = $('#from').val() == 'meter' ? 1000 : 100000;
  $('#result').text($('#input').val() / divisor); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-8 offset-md-2 jumbotron">
  <h2>Lenght</h2>
  <p>
    <input id="input" type="number" placeholder=""> From:

    <select id="from" name="from">
      <option id="from_meter" value="meter">meter</option>
      <option id="from_centimeter" value="centimeter">centimeter</option>
    </select> To:
    <select id="to" name="to">
      <option id="to_kilometer" value="kilometer">kilometer</option>
    </select>
  </p>
  <p>Result: <span id="result"></span></p>
</div>