JavaScript getElementById總是返回null

我想構建一個簡單的預算計算器，每次我點擊我的提交按鈕，我什麼也沒有發生。當我嘗試在控制檯中檢查我的變量值時，即使在我的輸入框中鍵入了值之後，它們仍顯示爲空。誰能告訴我我做錯了什麼？在查看其他問題後，我一直無法找到與我的問題相關的答案。JavaScript getElementById總是返回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>

來源

2017-02-18 Reg Smith

只是一個小提示：'

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

來源

2017-02-18 18:39:09

你不用沒有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而不是整個對象。

希望這會有所幫助。

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>

來源

2017-02-18 18:34:12

當腳本緩存元素運行時，這仍然會中斷，因爲元素不存在。 – Gerrit0

這確實有幫助。我不是js的這個基礎，只是把名字而不是id弄錯了。 '-_-感謝您指出我的錯誤！ –

請檢查我的更新。不用擔心@RegSmith已經發生在我們所有人身上;） –

我想你需要嘗試的getElementById（ 'kmTravelled'）。

來源

2017-02-18 18:37:56

首先，你必須給在HTML標記正確的ID。檢查您的HTML標記，將那些名稱轉換爲ID。現在你必須稍微改變你的javascript代碼，如果你看看你的代碼你沒有給你的變量分配任何值。修復這些問題，您的代碼將正常運行。

來源

2017-02-18 19:08:30 mim

JavaScript getElementById總是返回null

回答

相關問題