這是一個初學者的問題。我只是想不出盡可能簡單的答案。
我有兩個檔案：一個帶有 JavaScript 函式，另一個帶有 HTML 代碼。JavaScript 應該構建選單的元素。
這就是我所擁有的：
JavaScript (mynaivesdk.js)：
async function buildMenu(element){
const webElements = [{"name": "Home", "href": "index.html"}, {"name": "Works", "href": "works.html"}, {"name": "Contact", "href": "contact.html"}]
var menu = document.getElementById(element);
webElements.forEach((webelement) => {
const row = '<li><a href="' webelement.href '">' webelement.name '</a></li>';
menu.innerHTML = row;
});
}
HTML：
<html>
<head>
<script type="module" src="mynaivesdk.js"></script>
<title>My Menu</title>
</head>
<body>
<h1>This is my menu</h1>
<ul id="mymenu" onload="buildMenu('mymenu')">
</ul>
</body>
</html>
結果是什么都不顯示。沒有錯誤。我的結論是我的 HTML 根本沒有呼叫 JavaScript 函式。
這就是我所期望的：
<html>
<head>
<script type="module" src="mynaivesdk.js"></script>
<title>My Menu</title>
</head>
<body>
<h1>This is my menu</h1>
<ul id="mymenu">
<li><a href=?ndex.html">Home</a></li>
<li><a href=works.html">Works</a></li>
<li><a href=contact.html">Contact</a></li>
</ul>
</body>
</html>
我知道這應該非常簡單。我只是想不出這樣做的正確方法。
謝謝！
uj5u.com熱心網友回復：
在加載 JS 檔案時呼叫您的函式，它會為您構建選單。
您需要將該defer屬性添加到您的<script>標簽中。這個簡單的屬性取代了做這DOMContentLoaded件事的需要。
干得好：
function buildMenu(menu) {
const webElements = [{
"name": "Home",
"href": "index.html"
}, {
"name": "Works",
"href": "works.html"
}, {
"name": "Contact",
"href": "contact.html"
}]
webElements.forEach((webelement) => {
const row = '<li><a href="' webelement.href '">' webelement.name '</a></li>';
menu.innerHTML = row;
});
}
buildMenu(document.getElementById('mymenu'));<html>
<head>
<script defer type="module" src="mynaivesdk.js"></script>
<title>My Menu</title>
</head>
<body>
<h1>This is my menu</h1>
<ul id="mymenu">
</ul>
</body>
</html>uj5u.com熱心網友回復：
有幾件事需要了解：
正如 epascarello 在評論中指出的那樣，該
UL元素沒有load事件，因此該buildMenu()函式永遠不會觸發。因此，您需要根據某個事件（按下按鈕、懸停在特定元素上，或者 - 在這種情況下 - 檔案加載事件）呼叫 buildMenu 函式。
檔案加載事件(
DOMContentLoaded)很重要，因為只要元素都出現在 DOM 中，它就會被觸發。在此之前，如果您運行該buildMenu函式，該#mymenu元素可能還不存在，并且什么也不會發生。此方法很容易擴展，您可以在構建應用程式時添加更多函式呼叫等。還值得注意的是，這是構建 JavaScript 函式加載/呼叫的標準方式。
這是它的樣子：
document.addEventListener('DOMContentLoaded', () => {
const myUl = document.getElementById('mymenu');
buildMenu(myUl);
});
function buildMenu(myEl){
const webElements = [{"name": "Home", "href": "index.html"}, {"name": "Works", "href": "works.html"}, {"name": "Contact", "href": "contact.html"}]
//var menu = document.getElementById('mymenu'); //not needed
webElements.forEach((webelement) => {
const row = '<li><a href="' webelement.href '">' webelement.name '</a></li>';
myEl.innerHTML = row;
});
}<html>
<head>
<script type="module" src="mynaivesdk.js"></script>
<title>My Menu</title>
</head>
<body>
<h1>This is my menu</h1>
<ul id="mymenu" onload="buildMenu('mymenu')">
</ul>
</body>
</html>uj5u.com熱心網友回復：
Element沒有onload活動。- 您不必添加
async關鍵字。
請閱讀JavaScript 異步
- 您可以將您的 javaScript 代碼
</body>放在<script>標簽之前，也可以只創建一個新js檔案。
<body>
.....
<!-- Here your change -->
<script>buildMenu("mymenu");</script>
</body>
- 請使用模板文字，它比字串連接更好。
JavaScript 模板文字
const row = `<li><a href="${element.href}">${element.name}</a></li>`;
最終的代碼將是這樣的。
在您的script.js檔案中：
function buildMenu(menuID) {
const webElements = [
{ name: "Home", href: "index.html" },
{ name: "Works", href: "works.html" },
{ name: "Contact", href: "contact.html" }
];
var menu = document.getElementById(menuID);
webElements.forEach((element) => {
const row = `<li><a href="${element.href}">${element.name}</a></li>`;
menu.innerHTML = row;
});
}
在您的index.html檔案中
<html>
<head>
<title>My Menu</title>
</head>
<body>
<h1>This is my menu</h1>
<ul id="mymenu">
</ul>
<script src="script.js"></script>
<script>
buildMenu("mymenu")
</script>
</body>
</html>
現場示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/354535.html
標籤：javascript html 功能