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

我正在尝试创建一个网页，其中有一堆div和相应的按钮。 单击按钮后，我需要能够显示div

我面临的问题是，当我单击任意按钮时，就会显示div，但随后的按钮单击不会显示相应的div

我对所有div使用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);

“div”和按钮都是动态创建的，“noteName”是存储每个div的“id”并在函数的每次迭代中命名的变量

addNote（）

PS我实际上使用'div'元素作为按钮，因此在上面将它们称为'buttons'

有什么帮助吗？
您的文档不应该在同一页上有重复的ID，因为这不符合W3规范
getElementById（）
返回集合中的第一个元素（这就是为什么只显示一个div而不显示其余的div）。改用类选择器

示例（使用jQuery，但主体相同）：
您能将代码粘贴到问题中吗。问题并不是显而易见的POST代码，当您单击按钮时设置display none/block我添加了代码。如果您需要任何其他信息，请告诉我（我是新学员）。我需要一种方法来隐藏所有其他div并仅显示该按钮所单击的div。是否要在单击按钮时显示div，对吗？那么，为什么要将事件侦听器添加到div而不是按钮中呢？我实际上是在使用按钮的“div”元素。忘了提那件事了。