Question

我今天制作了这个小代码：

document.getElementById("pays" + nb_items).onclick = function () {
  var div = document.createElement('div');
  div.className = 'tata';
  div.setAttribute("id", "pays" + ++nb_items);
  document.getElementById("country").appendChild(div);
};

我认为我有一个JS问题。

当我点击div＃1时，它会创建一个新的div＃2，我想点击div＃2创建一个div＃3，依此类推。

实际上只有点击div＃1才会添加新的div。知道我做错了什么吗？谢谢！

Answer 1

您需要为新创建的eventListener

添加div

创建单独的listener函数并将其绑定到动态创建的每个div;

var listener = function () {
  var div = document.createElement('div');
  div.className = 'tata';
  div.setAttribute("id", "pays" + ++nb_items);
  div.onclick = listener;
  document.getElementById("country").appendChild(div);
};

更新codepen

Answer 2

您可以将事件绑定到父元素国家/地区，而不是附加到每个div

检查此代码段

var nb_items = 1;

window.onload = function() {
  var colors = ["black", "orange", "yellow"]
  document.querySelector('.country').addEventListener('click', function(event) {
    if (event.target.nodeName === "DIV") {
      var div = document.createElement('div');
      div.className = 'tata';
      div.setAttribute("id", "pays" + ++nb_items);
      div.style.backgroundColor = colors[nb_items];
      document.getElementById("country").appendChild(div);
    }
  })

};

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
}
.top-bar {
  background-color: blue;
  min-height: 16vh;
}
.country {
  display: flex;
  justify-content: center;
  min-height: 70vh;
  width: 100%;
}
.footer {
  position: absolute;
  background-color: green;
  height: 14vh;
  width: 100%;
}
.toto {
  background-color: coral;
  width: 100%;
}
.tata {
  width: 100%;
}

<body>
  <div class="top-bar">
    <!-- Local clock -->
  </div>
  <div id="country" class="country">
    <div id="pays1" class="toto">
    </div>
    <!-- pays -->
  </div>
  <div class="footer">
  </div>
</body>

希望这有帮助

Answer 3

您没有向新创建的div添加var div = document.createElement('div'); div.className = 'tata'; div.setAttribute("id", "pays" + ++nb_items); div.addEventListener("click",function(){ //create the div#3 here }); document.getElementById("country").appendChild(div);

commitEdit()

点击新的div

3 个答案: