Question

我正在尝试构建一个简单的预算计算器，每次单击我的提交按钮时都没有任何反应。当我尝试在控制台中检查我的变量值时，即使我在输入框中输入了值，它们也显示为null。谁能告诉我我做错了什么？在查看了其他问题之后，我找不到与我的问题相关的答案。

<!DOCTYPE html>
<html>

<head>
    <title>Budget Calculator</title>
    <style>
        input {display:block;}
        #clear {float:left;}
        #submit {float:left;}
    </style>
    <script type="text/javascript">
        var kms = document.getElementById("kmTravelled");
        var rent = document.getElementById("rentPerMonth");
        var carCost = document.getElementById("carPayment");
        var costPerTrip = (kms/12.75)*20;
        var total = Math.round((costPerTrip + rent + carCost)*100)/100;

        function calculate()
        {
            document.getElementById("calculator").innerHTML = total;
        }
    </script>
</head>
<body>


    <form id="myForm")>
        Km travelled per day: <input type="number" name="kmTravelled" />
        Rent per month: <input type="number" name="rentPerMonth" />
        Car payment per month: <input type="number" name="carPayment" />
    </form>
    <button id="submit" type="button" onclick="calculate();">
        Submit
    </button>
    <button id="clear" type="clear">
        Clear
    </button>

    <p id = "calculator">
    </p>

    <script>
        calculate();
    </script>

</body>

Answer 1

你id中没有input但你有name而不是{}}使用名称选择器$('[name=""]')，如：

var kms = document.querySelector("[name='kmTravelled']").value;
var rent = document.querySelector("[name='rentPerMonth']").value;
var carCost = document.querySelector("[name='carPayment']").value;

如果你真的想要使用id，只需添加它们，JS代码可以是：

var kms = document.querySelector("#kmTravelled").value;
var rent = document.querySelector("#rentPerMonth").value;
var carCost = document.querySelector("#carPayment").value;

注意：您应该只获得元素的value而不是整个对象。

希望这有帮助。

＆＃13;

var kms = document.querySelector("[name='kmTravelled']").value;
var rent = document.querySelector("[name='rentPerMonth']").value;
var carCost = document.querySelector("[name='carPayment']").value;
var costPerTrip = (kms/12.75)*20;
var total = Math.round((costPerTrip + rent + carCost)*100)/100;

function calculate()
{
  document.getElementById("calculator").innerHTML = total;
}

calculate();

＆＃13;

input {
  display:block;
}

#clear {
  float:left;
}

#submit {
  float:left;
}

＆＃13;

<form id="myForm")>
    Km travelled per day: <input type="number" name="kmTravelled" />
    Rent per month: <input type="number" name="rentPerMonth" />
    Car payment per month: <input type="number" name="carPayment" />
</form>

<button id="submit" type="button" onclick="calculate();">
    Submit
</button>

<button id="clear" type="clear">
    Clear
</button>

<p id = "calculator"></p>

＆＃13;

Answer 2

我建议使用id属性并移动部分以获取函数内部的值，以及获取value属性并将字符串值转换为数字以进行计算。

function calculate() {
    var kms = +document.getElementById("kmTravelled").value;
    var rent = +document.getElementById("rentPerMonth").value;
    var carCost = +document.getElementById("carPayment").value;
    var costPerTrip = (kms / 12.75) * 20;
    var total = Math.round((costPerTrip + rent + carCost) * 100) / 100;

  document.getElementById("calculator").innerHTML = total;
}

input { display: block; }
#clear { float: left; }
#submit { float: left; }

<form id="myForm">
  Km travelled per day: <input type="number" name="kmTravelled" id="kmTravelled"/> Rent per month: <input type="number" name="rentPerMonth" id="rentPerMonth" /> Car payment per month: <input type="number" name="carPayment" id="carPayment" />
</form>
<button id="submit" type="button" onclick="calculate();">Submit</button>
<button id="clear" type="clear">Clear</button>
<p id="calculator"></p>

Answer 3

我认为你需要尝试getElementById（＆＃39; kmTravelled＆＃39;）。

Answer 4

首先，您必须在HTML标记中提供正确的ID。检查您的HTML标记，将名称转换为 ID 。现在，您必须稍微更改 javascript代码，如果您查看代码您没有为变量分配任何值。修复这些问题，您的代码将正常运行。

JavaScript getElementById始终返回null

4 个答案: