创建'divs'图层并在单击相应按钮时显示它们

Question

我正在尝试创建一个网页，其中我有一堆Divs，并为它们提供相应的按钮。单击按钮时，我需要能够显示Div。

我面临的问题是，当我单击任何按钮时，显示了DIV，但随后的按钮点击不显示其相应的Divs。

我在所有DIVS中使用了SET display: none，然后单击相应的DIV时，使用div.style.display = "block"将显示设置为display: block。

以下是完整的JavaScript：

function init() {
      var i = 0;
      var add = document.getElementById("add-button");
      add.addEventListener("click", addNote);
      function addNote() {
        var mainClass = "wholenote" + i;
        var note_name = prompt("Enter a name for the note");
        var div = document.createElement("div");
        var node = document.createTextNode(note_name);
        div.appendChild(node);
        div.className = "note";
        div.className += " " + mainClass;
        var inputButton = document.createElement("input");
        inputButton_id = "deletetheNote" + i;
        inputButton.setAttribute("id", inputButton_id);
        inputButton.setAttribute("type", "image");
        inputButton.setAttribute("src", "Dustbin.png");
        inputButton.className += "deleteButton";
        div.appendChild(inputButton);
        var element = document.getElementById("side-bar");
        element.appendChild(div);
        noteArea = document.createElement("div");
        noteArea.className = "note-area";
        noteArea.className += " " + mainClass;
        var noteName = "note" + i;
        noteArea.setAttribute("id", noteName);
        document.getElementById("main-area").appendChild(noteArea);

        div.addEventListener("click", function() {
          document.getElementById(noteName).style.display = "block";
        }, true);
        inputButton.addEventListener("click", function() {
          var elems = document.getElementsByClassName(mainClass);
          console.log(elems);
          for (var k = elems.length - 1; k >= 0; k--) {
            var parent = elems[k].parentNode;
            parent.removeChild(elems[k]);
          }
        });
        i++;
      }
    }

以下是将显示为无/块的代码：

div.addEventListener("click", function() {
          document.getElementById(noteName).style.display = "block";
        }, true);

"divs"和按钮都在动态创建，而'notename'是为每个div存储'id'并在函数addNote()的每个迭代中命名的变量。

ps我实际上将"div"元素用作按钮，因此将它们称为上面的"按钮"。

有帮助吗？

Answer 1

您的文档不应在同一页面上重复ID，因为它不遵循W3规范。getElementById()返回集合中的第一个元素(这就是为什么只有一个DIV显示但不显示其余的(。改用类选择器。

示例(使用jQuery，但主体是相同的(：https：//jsfiddle.net/hq7c7h2u/