我似乎看不到我的 JavaScript 和 HTML 代碼中缺少什么

Question

我是 JavaScript 的新手，並且很難顯示我的計算結果。 我的 JavaScript 代碼上的消息說它缺少聲明變量。 我真的不知道還能嘗試什么，因為我是新手，而且我已經堅持了幾天了，這非常尷尬。 這是我的 HTML 代碼，計算應顯示在該代碼中，以及相應的 JavaScript 代碼：

function compute() {
    var principal = parseFloat(document.getElementById("principal").value);
    var rate = parseFloat(document.getElementByIdementById("rate").value);
    var years = parseFloat(document.getElementById("years").value);
    var result = principal * years * rate /100;
    var years = new Date().getFullYear()+parseInt(years);
}

<button onclick="compute()">Compute Interest</button>
<span id="result"></span>
<p id="result"></p>

<script>
function compute() {
   document.getElementById("result").innerHTML = "If you deposit<mark>"
   +principal+"</mark>,<br/> at an interest rate of<mark>"
   +rate+"%</mark><br/>. You will receive an amount of<mark>"+result+
   ",</mark><br/>in the year<mark>"+year+"</mark><br/>";
}
</script>

Answer 1

歡迎使用 StackOverflow。

讓我們 go 看你的代碼，有幾個錯誤：

1. 您已經聲明了一個 function compute() （第一個），它創建並為 scope 在函數內部的一些變量賦值！ 在第二個compute() function 中，您試圖訪問那些未在其中聲明的變量的值，並且其 scope 僅限於第一個Undefined variable -> 因此編譯器將給出錯誤。

2. getElementById有一個拼寫錯誤： var rate = parseFloat(document.getElementByIdementById("rate").value);

3. 在第一個compute() function 中，您已經聲明了一個使用相同名稱years的變量 -> 最好使用不同的名稱或簡單地覆蓋它。

4. 您在兩個不同的 HTML 標記中使用了相同的id="result" ，這沒有意義，因為id應該只標識一個元素； 我想您想將詳細說明的結果放在<p>元素中。

因此，您必須修改您的代碼並將其放入一個compute() function 中：

<script>
function compute() {
    var principal = parseFloat(document.getElementById("principal").value);
    var rate = parseFloat(document.getElementById("rate").value);
    var years = parseFloat(document.getElementById("years").value);
    var result = principal * years * rate /100;
    var years_modified = new Date().getFullYear() + parseInt(years);

    document.getElementById("result").innerHTML = "If you deposit<mark>"
   + principal + "</mark> , <br/> at an interest rate of<mark>"
   + rate + "%</mark><br/>. You will receive an amount of<mark>" + result +
   ",</mark><br/>in the year<mark>" + years_modified + "</mark><br/>";
}
</script>

<button onclick="compute()">Compute Interest</button>
<span></span>
<p id="result"></p>

• 參考： Scope 之 JavaScript 功能

PS = 我想給你一個建議，避免使用多個 function 的同名，你可能會遇到意想不到的行為

Answer 2

這應該適合你：

HTML：

<script>
function compute() 
  {
   var principal = parseFloat(document.getElementById("principal").value);
   var rate = parseFloat(document.getElementById("rate").value);
   var years = parseFloat(document.getElementById("years").value);
   var result = principal * years * rate /100;
   var years_result = new Date().getFullYear()+parseInt(years);
   document.getElementById("result").innerHTML = "If you deposit<mark>"
   +principal+"</mark>,<br/> at an interest rate of<mark>"
   +rate+"%</mark><br/>. You will receive an amount of<mark>"+result+
   ",</mark><br/>in the year<mark>"+years_result+"</mark><br/>";
   }
 </script>
<button onclick="compute()">Compute Interest</button>
<span id="result"></span>
<p id="result"></p>

讓我知道事情的后續！

Answer 3

也許這會奏效。

function compute() {
  var principal = parseFloat(document.getElementById("principal").value);
  var rate = parseFloat(document.getElementById("rate").value);
  var years = parseFloat(document.getElementById("years").value);
  var result = principal * years * rate / 100;
  var years_result = new Date().getFullYear() + parseInt(years);

  document.getElementById("result").innerHTML = `
    If you deposit <mark>${principal}</mark>
    <br/> at an interest rate of
    <mark>${rate}%</mark><br/>.
    You will receive an amount of <mark>${result}</mark>
    <br/> in the year <mark>${years_result}</mark><br/>`;
}

你也有一個錯誤var rate = parseFloat(document.getElementByIdementById("rate").value);

並且當在 HTML 元素上指定時，id 屬性值必須是唯一的。