如何將JavaScript函數應用於選擇表單？

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

的代碼應該像這樣的：在輸入表單

1. 輸入一個數值，說10
2. 輸入和輸出（這裏的唯一選項是美元和CAD）
3. 按選擇一個值「提交」
4. 的JavaScript計算，10美元= 13.23 CAD並輸出。

Answer 1

你需要它的使用之前，你report函數變量的聲明移到：

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"); 
 
    } 
 
    } 
 
}

<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>

看看function declaration hoisting的根本原因。