我似乎看不到我的 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 属性值必须是唯一的。