时间戳

首页 > 解决方案 > 计算器显示语法错误和referenceError

javascript - 计算器显示语法错误和referenceError

问题描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>Cost Calculator</title>
</head>
  <body>

    <h1>
        College Cost Calculator
    </h1>

    <form>
        <input type= "numbers" id= "annualCost" placholder= "annual cost" />
        <br>
        <input type= "numbers" id= "inflationRate" placholder= "inflationRate" />
        <br>
        <input type= "numbers" id= "yearsUntilCollege" placholder= "yearsUntilCollege" />
        <input id= "button" type="button" value = "Estimate" onclick= "calculator()"/>
        <input id= "reset" type="reset" value = "Reset"/>
    </form> 
    <p id= "result">

    </p>    

    <script>
      // your code here
        document.getElementById(button) = function calculator () {
       let inflationRate = document.getElementById(inflationRate);
        let annualCost = document.getElementById(annualCost);
        let totalCost;
        let annualSaving;
        let yearsUntilCollege = document.getElementById(yearsUntilCollege);
        totalCost = annualCost;
        let amount = (inflationRate * annualCost) + annualCost;
        totalCost += amount;
        amount = ((inflationRate * 2) * annualCost) + annualCost;
        totalCost += amount;
        amount = ((inflationRate * 3) * annualCost) + annualCost;
        totalCost += amount;
        annualSaving = totalCost / 5;
        return amount
        return annualSaving
        console.log(`For a 4 years college degree with Annual cost: $${annualCost} and Inflation rate: ${inflationRate}`);
        console.log(`You have to pay $${totalCost}.`);
        console.log(`You need to save ${annualSaving} annually for ${yearsUntilCollege} years.`)
        document.getElementById(result).innerHTMl = `For a 4 years college degree with Annual cost: $${annualCost} and Inflation rate: ${inflationRate}`
        `You have to pay $${totalCost}.`
        `You need to save ${annualSaving} annually for ${yearsUntilCollege} years.`
        }
    </script>
  </body>
</html>

这是一个计算四（04）年大学费用的代码，包括通货膨胀和大学开始前要存多少钱。帮我找出这段代码的问题。它不断给出语法错误 28:15 和参考错误。我似乎无法弄清楚我做错了什么，我是否正确调用了该函数？

标签： javascript

解决方案

这里有很多问题：

1- 元素 ID 是字符串。因此，document.getElementById期望你向它传递一个字符串，并且字符串被引号（' 或 "）包围。

2- 要获取<input>元素的值，您应该使用.value. 例如：

//get the value of input with id "inflationRate"
var inflationRate = document.getElementById("inflationRate").value;

3- 要在按钮单击时调用函数，请使用按钮的onclick事件，如下所示：

function calculator() {
    //do something...
}
//call the function calculator whenever the button is clicked
document.getElementById("button").onclick = calculator;

4- 正如@ecg8 在评论中指出的那样，return语句会立即跳出函数，因此您不能在语句之后进行进一步的语句/计算return，因为它们将无法到达。

附带说明一下，在您的 HTML 中，数字输入的类型应该是 ofnumber而不是numbers。

编辑：另外，在你最后的声明中：

document.getElementById(result).innerHTMl = `For a 4 years college degree with Annual cost: $${annualCost} and Inflation rate: ${inflationRate}`
        `You have to pay $${totalCost}.`
        `You need to save ${annualSaving} annually for ${yearsUntilCollege} years.`

要将这三个字符串连接成一个，请将整个字符串（所有行）包装成一对反引号（`），或使用+运算符连接字符串：

document.getElementById(result).innerHTMl = `For a 4 years college degree with Annual cost: $${annualCost} and Inflation rate: ${inflationRate}`
+ `You have to pay $${totalCost}.`
+ `You need to save ${annualSaving} annually for ${yearsUntilCollege} years.`;

最后一点，所有这些问题都是基本的 Javascript 问题，所以我真的建议在解决这样的问题之前学习和理解 Javascript 的基础知识（语法、函数、事件等）。

推荐阅读