我似乎看不到我的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。

让我们去看看你的代码，有几个错误：

1. 您已经声明了一个函数compute()(第一个(，它可以创建一个值并将其赋值给一些作用域在函数内的变量！在第二个compute()函数中，您试图访问那些未在其内部声明的变量的值，这些变量的范围仅限于第一个函数->因此编译器将给出错误CCD_ 3。

2. getElementById有一个拼写错误：var rate = parseFloat(document.getElementByIdementById("rate").value);

3. 在第一个compute()函数中，您使用相同的名称years->最好使用不同的名称或简单地覆盖它。

4. 您在两个不同的HTML标记中使用了相同的id="result"，这没有意义，因为id应该只标识一个元素；我想您希望将详细说明的结果放在<p>元素中。

所以你必须修改你的代码，并将其放入一个compute()函数中：

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

• 参考：JavaScript函数的范围

p。S=我想给你一个建议，避免对多个函数使用相同的名称，你可能会遇到意外的行为

Answer 2

也许这会奏效。

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属性值必须是唯一的。

Answer 3

这应该适用于您：

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>

让我知道进展如何！