时间戳

首页 > 解决方案 > 在页面加载时对 HTML 元素调用 javascript 函数

javascript - 在页面加载时对 HTML 元素调用 javascript 函数

问题描述

这是一个初学者的问题。我就是想不出这么简单的答案。

我有两个文件：一个带有 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>

我知道这应该非常简单。我只是想不出这样做的正确方法。

谢谢！

标签： javascripthtmlfunction

解决方案

当 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>

推荐阅读