.js中的Javascript函數無法在.html中獲取ElementElementById

我有一個login.js，它具有在按下HTML中的clickme按鈕時調用的函數。.js中的Javascript函數無法在.html中獲取ElementElementById

document.getElementById('clickMe').addEventListener('click',execuateAllCode);

下面的線是在由clickme按鈕調用的函數，它不工作

var password = document.getElementById("password").value;

它給這個錯誤：

Uncaught TypeError: Cannot read property 'value' of null

popup.html包含此代碼：

... 
<input id="clickMe" type="button" value="clickMe"/> 
<input type="password" name="password" id="password" value="temppassword" placeholder="Password"/> 
...

The錯誤應該表示沒有包含id =「password」的元素。但我確實有這個ID。 login.js中的函數不能「看到」HTML文件中的輸入嗎？

編輯1：我已嘗試添加：

window.onload = function() { 
    execuateAllCode() 
};

到.js文件，但是這並沒有擺脫錯誤的，這也導致在代碼的其他部分錯誤，停止造型。

的HTML：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 
<body> 
    <input id="clickMe" type="button" value="clickme"/> 
    <script language="javascript" src="login.js"></script> 
    <input type="text" name="email" id="username" value="[email protected]" placeholder="Email"/> 
    <input type="password" name="password" id="password" value="temppass" placeholder="Password"/> 
</body> 
</html>

document.getElementById('clickMe').addEventListener('click',execuateAllCode); 
function execuateAllCode() { 
    document.write("<br />" + "From login" + "<br />"); 
    var output; 
    output = FunctionOne(); 
    document.write("<br /> the output: " + output + "<br />"); 
} 

function FunctionOne(){ 
... 
    var password = document.getElementById("password").value; 
    var user_name = document.getElementById("username").value; 
... 
}

來源

2015-10-15 Rorschach

這一切都取決於代碼的運行時間。如果代碼在構建DOM之前運行，那麼DOM中不會有這樣的元素。 – Pointy

**沒有包含id =「密碼」的元素** - 是，**或該特定元素的值爲空** - 否。 – Igor

運行密碼代碼，我可以看到並更改值，然後按下按鈕並調用帶有getelementbyid的代碼。 @Points – Rorschach

你popup.html不包括login.js的頁面 - 這就是爲什麼在login.js代碼不會找到ID =「密碼」 DOM元素。包含login.js的頁面包含一個id =「clickMe」的按鈕。

在看到你的execuateAllCode：

http://www.w3schools.com/jsref/met_doc_write.asp - 「寫（）方法主要是用於測試：如果它是用來在HTML文檔完全加載後，會刪除所有現有的HTML」在使用innerText或innerHTML代替使用document.write的情況下添加任何輸出的div元素。

來源

2015-10-15 21:39:30 Igor

popup.html確實包含：' - 是否加載？ – Igor

我已將其更改爲您的建議。 login.js被加載，因爲當按下按鈕調用login.js時，出現的錯誤引用了login.js – Rorschach

-1

一個偉大的方式來調試JavaScript是扭曲的變量和事件中的console.log並檢查他們的瀏覽器控制檯結果。

嘗試添加console.log（密碼）後，您將它設置爲等於輸入的值。這會告訴你，如果該jQuery功能正在工作。這將幫助您找出HTML「看到」的內容

來源

2015-10-15 20:59:58 WesW

您正在獲取尚未加載的元素（DOM未加載）。這就是爲什麼你面臨這個問題。

window.onload = function() { 
 
    /*Do that stuff in this function*/ 
 
};

更多參考檢查此鏈接。 https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
希望這將有助於:)

來源

2015-10-15 21:00:07

我加了：window.onload = function（）{ execuateAllCode（） }; ，它只是增加了另一個錯誤，並沒有解決原來的錯誤。 – Rorschach

它給了什麼錯誤？ –

您應該在正文標記結束之前添加腳本標記。 –

你需要做的是：

初始化變量密碼之外的功能，然後把它聲明
或者你可以使用的window.onload =函數名;
爲什麼不通過登錄按鈕點擊或任何事件調用函數？

來源

2015-10-15 21:49:48

我不明白你的意思，但我已經將代碼添加到問題 – Rorschach

我添加了window.onload = execuateAllCode（）;它只會刪除一些字段並破壞造型 – Rorschach

訪問：https：//jsfiddle.net/NitinBagoriya/Ldgz1fba/ 並讓我知道是否有其他東西需要。 :) –

.js中的Javascript函數無法在.html中獲取ElementElementById

回答

相關問題