這是爲什麼這個工作作爲內部腳本，但不是當你使用外部javascript文件

我只是在學習Javascript和需要對這個問題的答案。爲什麼這段JavaScript不能在HTML DOM中使用內部腳本標記工作？這是爲什麼這個工作作爲內部腳本，但不是當你使用外部javascript文件

這是我的html文檔。與內部的JavaScript擴展：

<div id="targetarea"> 
    <p>Hello World</p> 
</div> 
<div id="target-area"> 
    <p id="tagline">Hello World!</p> 
</div> 
<script> 
//Creating a a new element 
// store the target area to a variable to keep things neat 
var targetArea = document.getElementById("target-area"); 
// create our <p> element 
var p = document.createElement("p"); 
// create a text node inside the <p>, note that we're 
// using a variable "p" here 
var snippet = document.createTextNode("this was a generated paragraph"); 
// insert our generated paragraph into the DOM 
p.appendChild(snippet); 
targetArea.appendChild(p); 
</script>

這工作正常內部但使用外部js文件時它沒有。有人可以給我正確的js代碼片段以便在外部文件中工作並解釋原因嗎？

來源

2014-12-07 Calvin Edward

你的[js console]（http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code）告訴你什麼？ – Kaiido 2014-12-07 14:28:20

當我在控制檯中輸入時它說：Uncaught TypeError：無法讀取屬性'appendChild'null – 2014-12-07 17:13:20

所以這是因爲targetArea爲空，您的'document.getElementById（「target-area」）'失敗。你可能想把你的代碼包含到[function]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions）中，然後在文檔的['onload']（https ：//developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload）事件。這樣，在調用函數之前，您確定該元素已加載。如果仍然存在相同的錯誤，請檢查元素ID中是否有拼寫錯誤 – Kaiido 2014-12-07 18:06:10

這取決於您運行腳本的時間。

如果您在文件的<head>部分加載腳本，頁面的DOM尚未加載，因此例如getElementById將會失敗。

加載您的外部腳本作爲<body>零件中的最後一件事將解決此問題。

來源

2014-12-07 13:59:36 6502

這是身體中最後一件事，但仍然不起作用。這讓我很頭疼。 – 2014-12-07 14:08:33

如果代碼在內部運行良好但不在外部，則問題可能是鏈接JS文件。檢查你的鏈接到JS文件，並確保它正確鏈接。如果你鏈接到這樣的JavaScript文件

<script src="javascriptFile.js"> 
</script>

並且代碼仍然無法正確運行，那麼問題可能在於其他地方。還要確保你正在腳本內部加載腳本，並確保文件路徑是正確的。

你會驚訝地發現像錯字這樣的小錯誤會導致這樣的問題。

來源

2014-12-07 13:59:38

是的，它鏈接正確。我確定。除此之外，同一個js文件中的其他JavaScript片段也可以正常工作。 – 2014-12-07 14:06:54

這是爲什麼這個工作作爲內部腳本，但不是當你使用外部javascript文件

回答

相關問題