使用动态onclick功能动态创建一个div

Question

上下文：我很懒，我正在尝试使用原始 JavaScript 动态/自动创建超链接到页面标题的菜单按钮。

我的站点从位于与 document.onload 相同的文件夹中的外部文件加载正文的内容，我正在尝试设置一个菜单功能，然后应该加载默认页面的菜单项。 每次我从一个页面切换到另一个页面时手动加载菜单是有效的，因为我在最后的 loadContents() 中包含了 loadMenues(thispage)，但是在加载页面时它不会立即工作，因为加载正文内容做。 我不明白这种行为。

function setVisible(thisdiv){
    var alldivs = document.getElementsByClassName("container");
    [].forEach.call(alldivs, function(uniquediv){
        document.getElementById(uniquediv.id).style.display = "none";
        return;
    });
    document.getElementById(thisdiv).style.display = "block";
    window.scrollTo(0,0);
    loadMenues(thisdiv);
}
window.onload = function(){
    loadContent("personalinfo");
    loadContent("contactdetails");
    setVisible("personalinfo");
    loadMenues("personalinfo");
}

我正在解释这个次要问题，以便将我的主要问题置于语境中。

loadContents(file) 是一个从请求的文件中提取内容的函数。 每个文件的布局几乎相同，文件的每个部分都由custompadding div分隔，其中第一个子元素是h1元素，如下所示：

<html>
    <div class="custompadding">
        <h1 id="headerpersonaldetails">Personal details</h1>
        <p>Lorem ipsum</p>
    </div>
    <div class="custompadding">
        <h1 id="headercontactdetails">Contact details</h1>
        <p>Lorem ipsum</p>
    </div>
</html>

我正在尝试为这些标题中的每一个设置一个菜单项，该菜单项会滚动到单击的标题。 手动设置每个菜单项按预期工作，但我想使其自动化，因此更改任何文件都会自动将菜单项添加到我们更改的页面。 以下是我将这些元素添加到除数的代码，但我在处理 onclick 函数时遇到了问题。

function loadMenues(file) {
    var rightmenu = document.getElementById("right-menu");
    while(rightmenu.firstChild){
        rightmenu.removeChild(rightmenu.firstChild);
    }
    [].forEach.call(document.getElementById(file).children, function(custompaddingchild) {
    console.log(custompaddingchild);
    headerelement = custompaddingchild.getElementsByTagName("h1")[0]
    newbutton = document.createElement("div");
    newbutton.setAttribute("class", "menu-item");
    let movehere = function() { location.href="#"+headerelement.id; console.log(headerelement.id); }
    newbutton.onclick = movehere;
    /*rightmenu = document.getElementById("right-menu");*/
    buttonspanner = document.createElement("span");
    buttoncontent = document.createTextNode(headerelement.innerHTML);
    buttonspanner.appendChild(buttoncontent);
    newbutton.appendChild(buttonspanner);
    rightmenu.appendChild(newbutton);
    });
}

该功能的第一部分删除菜单中已有的所有节点，以便在换页时添加新节点。

在 Firefox 中尝试使用onclick定义 newbutton.setAttribute() 会导致 SyntaxError（当前不支持字段）。 如果我将静态字符串设置为newbutton.setAttribute("onclick", "location.href=#headerpersonalinfo"); 任何一个。

尝试将newbutton.onclick设置为函数的静态锚链接设置为一个函数，而是有效，这样

newbutton.onclick = function() {
    location.href = "#headerpersonalinfo";
}

这几乎是我当前代码的设置方式，除了我给这个函数一个唯一的变量，然后我调用它。

我遇到的问题是，正如我所看到的：每次找到新标头时都会重新定义变量，因此调用该函数会将用户发送到最后一个标头，而不是预期的标头。 如何在我用它定义onclick时设置要解析的函数，而不是在用户按下按钮时调用该函数？

PS：我正在使用我自己的文件、标题和项目的内部命名约定，以便尽可能地模块化我的网站。 由于这是一个仅用于我的简历的网站，因此我是其唯一的开发人员。

Answer 1

出现此问题是因为您将“变量”提升到全局范围（newbutton 和 headerelement）。

将它们设置为阻止作用域变量（ const或let ），您将看到它的工作原理： https : //codesandbox.io/s/rm4ko35vnm

function loadMenues(file) {
  var rightmenu = document.getElementById("right-menu");
  while (rightmenu.firstChild) {
    rightmenu.removeChild(rightmenu.firstChild);
  }
  [].forEach.call(document.getElementById(file).children, function(
    custompaddingchild
  ) {
    console.log(custompaddingchild);
    const headerelement = custompaddingchild.getElementsByTagName("h1")[0];
    console.log(headerelement.innerHTML);
    const newbutton = document.createElement("div");
    newbutton.setAttribute("class", "menu-item");
    console.log(headerelement.id);
    let movehere = function() {
      location.href = "#" + headerelement.id;
      console.log(headerelement.id);
    };
    newbutton.addEventListener('click', movehere);
    const rightmenu = document.getElementById("right-menu");
    const buttonspanner = document.createElement("span");
    buttoncontent = document.createTextNode(headerelement.innerHTML);
    buttonspanner.appendChild(buttoncontent);
    newbutton.appendChild(buttonspanner);
    rightmenu.appendChild(newbutton);
  });
}

使用动态onclick功能动态创建一个div

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-24 16:02:14

使用动态onclick功能动态创建一个div

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-24 16:02:14

解决方案1
1 已采纳 2019-02-24 16:02:14