使用動態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