document.getElementById似乎返回null

我正在製作一個包含兩個數字字段的html文檔。document.getElementById似乎返回null

用戶輸入數字信息，然後單擊一個按鈕激活單獨的.js文件中的方法。我遇到的問題是，每當您輸入數據並按下按鈕時，它將返回數據爲NULL。

以下是我有：

<html> 
<head> 
</head> 
<body> 

<h1>Retirement calculation page!</h1> 
<p class="a">Enter the information below to find out how much money you will have for retirement</p> 

<form name="form1"> 
     Enter Age: <input type ="number" name="age1" min="1" max="125"> 
</form> 
<form name="form2"> 
     Enter Contribution amount: <input type="number" name="cont1"> 
</form> 
<button onclick="rFunction()">Submit</button> 
<script src="retirement.js"></script> 
</body> 

</html>

這裏是在的.js文件的方法。

function rFunction() 
{ 
     var age = document.getElementById("age1"); 
     var cont = document.getElementById("cont1"); 

     document.write("Age = " + age); 
     document.write("Cont = " + cont); 

}

我在做什麼錯？

來源

2014-02-23 Munkey

您可以使用'getElementById'，但是沒有任何元素實際上有ID。 – Blender

[爲什麼jQuery或DOM方法如\ getElementById \'找不到元素？]（http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom- method-such-as-getelementbyid-not-find-the-element） –

@FelixKling：不是重複的，而是一個簡單的錯誤。 –

您並未將ID應用於任何字段，並且當您查找該值時，您會找到一個DOM對象，但您需要該值。更改HTML這樣的：

<form name="form1"> 
     Enter Age: <input type ="number" id="age1" name="age1" min="1" max="125"> 
     Enter Contribution amount: <input type="number" id="cont1" name="cont1"> 
</form> 
<button onclick="rFunction()">Submit</button>

和修改您的JS是這樣的：

var age = document.getElementById("age1").value; 
    var cont = document.getElementById("cont1").value;

順便說一句 - 你不需要兩個表單聲明。

來源

2014-02-23 00:14:28

很好的抓住形式decs。那肯定會造成問題。 –

你需要一個id屬性來替代name屬性：

<form name="form1"> 
     Enter Age: <input type ="number" id="age1" name="age1" min="1" max="125"> 
</form> 
<form name="form2"> 
     Enter Contribution amount: <input type="number" id="cont1" name="cont1">

這將允許您通過其ID（getElementById）獲得元素。

來源

2014-02-23 00:13:04 ltalhouarne

也許，在這個例子中，'id'和'name'是不同的東西。省略'name'屬性意味着任何數據都不會被提交給表單處理程序。 – 2014-02-23 00:15:43

您使用

name="age1"

當你應該使用

id="age1"

這就是所謂的getElementById。

來源

2014-02-23 00:14:05

document.getElementById似乎返回null

回答

相關問題