JavaScript getElementById 始终返回 null

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

您的 input 中没有 id，但您有 name，因此您可以使用名称选择器 $('[name=""]')，例如:

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

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

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

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

希望这对您有所帮助。

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();

input {
  display:block;
}

#clear {
  float:left;
}

#submit {
  float:left;
}

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

Answer 2

我认为您需要尝试 getElementById('kmTravelled').

Answer 3

我建议使用 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 4

首先，您必须在 HTML 标签中提供正确的 ID。检查你的 HTML 标签，将那些 name 转换成 id。现在你必须稍微改变你的javascript代码，如果你查看你的代码你没有为你的变量赋值 .解决这些问题，您的代码将运行正确。

JavaScript getElementById 始终返回 null

JavaScript getElementById always returning null

html

javascript

document

getelementbyid