我無法弄清楚為什么我的 html 頁面沒有運行我的外部 javascript 文件

Question

我有兩個名為 CalculateFV() 的 javascript 函數，它用於通過從 processEntries() 函數獲取輸入來計算我的未來值，然后在 HTML 頁面上的 future_value 文本框中顯示結果，但我目前不明白為什么它不是功能正常，按鈕無法計算我的結果我也使用 atom 作為我的編輯器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Future Value Calculator</title>
    <link rel="stylesheet" href="future_value.css">
    <script src="future_value.js"></script>
</head>

<body>
    <main>
        <h1>Future Value Calculator</h1>

        <label for="investment">Total Investment:</label>
        <input type="text" id="investment"><br>

        <label for="rate">Annual Interest Rate:</label>
        <input type="text" id="rate">%<br>

        <label for="years">Number of Years:</label>
        <input type="text" id="years"><br>

        <label for="future_value">Future Value:</label>
        <input type="text" id="future_value" disabled><br>

        <label>&nbsp;</label>
        <input type="button" id="calculate" value="Calculate"><br>
    </main>
</body>
</html>

     var $ = function(id) {
            return document.getElementById(id);
        };
        
        var calculateFV = function(investment_amount, interest_rate, number_of_years){
          var futureValue;
          futureValue = investment_amount
          for(var i = 1; i <= number_of_years; i++){
            futureValue = futureValue + (futureValue * interest_rate / 100);
          }
          return futureValue;
        }
        
        var processEntries = function(){
          var investment_amount = $("investment").value;
          var interest_rate = $("rate").value;
          var number_of_years = $("years").value;
        
          $("future_value").value = calculateFV(investment_amount, interest_rate, number_of_years);
        }
        
        window.onLoad = function(){
          $("calculate").value = processEntries;
          $("investment").focus();
        }

Answer 1

onLoad函數未正確處理，您需要在計算按鈕上注冊一個click偵聽器。 嘗試這個：

future_value.js:

"use strict";
var $ = function(id) {
    return document.getElementById(id);
};

var calculateFV = function(investment_amount, interest_rate, number_of_years){
  var futureValue;
  futureValue = investment_amount
  for(var i = 1; i <= number_of_years; i++){
    futureValue = futureValue + (futureValue * interest_rate / 100);
  }
  return futureValue;
}

var processEntries = function(){
  var investment_amount = $("investment").value;
  var interest_rate = $("rate").value;
  var number_of_years = $("years").value;

  $("future_value").value = calculateFV(investment_amount, interest_rate, number_of_years);
}

window.addEventListener('load', (event) => {
  $('calculate').addEventListener('click', processEntries);
  $("investment").focus();
});

使用它，我會在單擊計算后看到填充的未來值輸入。 請注意我對底部所做的更改。

我無法弄清楚為什么我的 html 頁面沒有運行我的外部 javascript 文件

問題描述

1 個解決方案

解決方案1
0 2020-10-03 22:46:17

我無法弄清楚為什么我的 html 頁面沒有運行我的外部 javascript 文件

問題描述

1 個解決方案

解決方案1 0 2020-10-03 22:46:17

解決方案1
0 2020-10-03 22:46:17