Question

以某种方式，我下面的JavaScript代码将值从公里转换为海里似乎不起作用。看起来很简单，但是我找不到原因。感谢您的帮助。

<div class="calculator">
  <form>
    Enter a value in Kilometers:
    <input type="text" id="kM" value="1000"> Result in Nautical Mile:
    <input type="text" id="nM" value="" disabled>
    <button onclick="return calculate();" id="calculate">CALCULATE</button>
  </form>
</div>

<script>
  function convert(kiloMeter) {
    return kiloMeter / 1.852;
  }

  function calculate() {
    var kMeter = Number(document.getElementById("kM").value);
    var convertedValue = convert(kMeter);
    document.getElementById("nM").innerHTML =
      convertedValue;
    return false;
  }
</script>

Answer 1

对于输入标签，您应该使用value而不是innerHtml。您也不需要返回false。

<div class="calculator">
  <form>
    Enter a value in Kilometers:
    <input type="text" id="kM" value="1000"> Result in Nautical Mile:
    <input type="text" id="nM" value="" disabled>
    <button type='button' onclick="calculate()" id="">CALCULATE</button>
  </form>
</div>

<script>
  function convert(kiloMeter) {
    return kiloMeter / 1.852;
  }

  function calculate() {
     var kMeter = Number(document.getElementById("kM").value);
    var convertedValue = convert(kMeter);
    document.getElementById("nM").value =
      convertedValue;
  }
</script>

Answer 2

至少有两个问题导致脚本无法正常工作

输入元素没有config\app属性。他们有一个"extra": { "laravel": { "dont-discover": [ "barryvdh/laravel-debugbar" ] } },。因此innerHMTL应该是value
到那时，一切都会好起来的。您不需要将按钮类型更改为document.getElementById("nM").innerHTML，因为您从函数返回false，并且按钮向表单返回false，从而停止了表单的提交。但是，将函数document.getElementById("nM").value（至少在Chrome和Firefox中）命名与元素（button）的ID似乎存在问题。更改函数名称或ID即可解决此问题。

calculate

id="calculate"

Answer 3

您应该使用value而不是innerHTML：

document.getElementById("nM").value = convertedValue;

使用JavaScript转换值

3 个答案: