Question

我在弄清楚如何将JavaScript功能应用于HTML时遇到了问题。我认为这很简单，但由于某种原因，我的代码无效。

以下是代码的HTML部分。它包括一个输入，两个下拉菜单（用于选择不同的货币类型），一个按钮和一个输出答案的部分。我删除了大部分代码只是为了让它更容易阅读，因为它基本上都是重复的。

<input type="number" id="money" placeholder="Enter starting cash" />
<select id="incur">
      <option value = "1">USD</option>
</select>
<select id="outcur">
      <option value = "2">CAD</option>
</select>
<button type="submit" id="start">Submit</button>
<p id="result" style="font-size:20pt; color:#E00;"></p>

HTML在页面上显示正常，但它没有任何功能。单击提交不会执行任何操作，我从未看到结果段落标记。

这是JavaScript的一部分。其余部分同样重要，但复制和粘贴以及修改后的值。

这是输入部分：

    document.getElementById("start").onclick = function () {
        'use strict';

        var incur = document.getElementById("incur");
        incur = incur.options[incur.selectedIndex].value;

        var outcur = document.getElementById("outcur");
        outcur = outcur.options[outcur.selectedIndex].value;

        var m = document.getElementById("money").value;


        /* USD */
        if (incur == 1) {
            var i = "USD";
            if (outcur == 2){
                report(m, i, (m * 1.35).toFixed(2), "CAD");
            }
        }
    };

这是输出部分：

    var report = function (inmoney, intype, outmoney, outtype) {
        'use strict';
        document.getElementById("result").innerHTML =
            inmoney + " " + intype + " = " + outmoney + " " + outtype;
    };

为什么我的代码没有做任何事情？我似乎无法发现它有什么问题，除非我不明白如何使用document.getElementById

代码应该像这样工作：

在输入表单中输入数值，例如10
选择输入和输出的值（此处仅选项为USD和CAD）
按“提交”
JavaScript计算10美元= 13.23加元并输出。

Answer 1

您需要将report函数变量的声明移至使用前：

＆＃13;

document.getElementById("start").onclick = function() {
  'use strict';

  var incur = document.getElementById("incur");
  incur = incur.options[incur.selectedIndex].value;

  var outcur = document.getElementById("outcur");
  outcur = outcur.options[outcur.selectedIndex].value;

  var m = document.getElementById("money").value;

  var report = function(inmoney, intype, outmoney, outtype) {
    'use strict';
    document.getElementById("result").innerHTML =
      inmoney + " " + intype + " = " + outmoney + " " + outtype;
  };

  /* USD */
  if (incur == 1) {
    var i = "USD";
    if (outcur == 2) {
      report(m, i, (m * 1.35).toFixed(2), "CAD");
    }
  }
}

＆＃13;

<input type="number" id="money" placeholder="Enter starting cash" />
<select id="incur">
      <option value = "1">USD</option>
</select>
<select id="outcur">
      <option value = "2">CAD</option>
</select>
<button type="submit" id="start">Submit</button>
<p id="result" style="font-size:20pt; color:#E00;"></p>

＆＃13;

了解function declaration hoisting的基本原因。

如何将JavaScript函数应用于选择表单？

1 个答案: