在單獨的 JS 文件中調用文檔 Object？

Question

我猜這是一個愚蠢的問題，但我在這個簡單的 function 上遇到了很多麻煩：

-- 位於.js 文件中--

function GetAssets() {
    alert("Hello World!");
    document.getElementById("asset_summary").innerHTML = "Test";
}

--位於 html.erb 文件中--

<script type="text/javascript" src="jslogic/overview_summary.js"></script>
<script>GetAssets();</script>

---

我知道 function 調用有效 b/c 我可以注釋掉 document.getElementByID 行，然后收到警報。 我知道 document.getElementByID 有效，因為我可以將它復制/粘貼到腳本標簽中並運行。 因此，當您將此調用移至外部文件時，語法必須有所更改嗎？ 我確信這很容易，但我找不到正確的參考來修復它。 提前致謝！

澄清隱藏的問題：這個 function 沒有正常運行，我假設這是因為第 3 行的 document.getElementByID 屬性 - 如果是，有人可以解釋我需要如何更改它嗎？ 如果不是，有人可以解釋為什么這在 html 腳本標簽內有效，但不能作為單獨的 function 嗎？

Answer 1

首先請將您的 function GetAssets()重命名為getAssets()

經驗法則： function 名稱應采用駝峰命名法。 PascalCase 用於 class 名稱。 閱讀JavaScript 命名約定以了解更多信息。

在您的 javascript 文件中，您聲明了您的 function 但您從未調用過它。

//Goes in your javascript file
function getAssets() {
    alert("Hello World!")
}
//Invoke the function
//getAssets()
//is commented so we can use a button in the html file to call the function

然后在您的 HTML 文件中刪除以下行： <script>GetAssets();</script>

但是如果你想從 html 運行你的 function 你可以使用一個按鈕。

<button onClick="getAssets()">Get Assets</button>

所有這一切都假設您的html和javascript文件已正確鏈接。

---

 function getAssets() { alert("Hello World;"). let divAssets = document.getElementById("asset_summary") divAssets.innerHTML = "<h3>Test</h3>" }

 <div> <h1>hola mundo</h1> <button onClick="getAssets()">Get Assets</button> <br /> <div id="asset_summary"> <h1>Sumary 1</h1> </div> </div>