Question

我正在构建一个猫点击游戏。我有五只猫，每只猫都有点击功能，可以增加每次点击的次数。

我已经从javascript函数创建了一个DOM，我已经从document.create方法创建了图像，以便我可以将事件附加到它。所以我的javascript代码包含纯HTML和HTMLElementObj。 fiddle。

但是innerHTML并没有削减由document.createElement

创建的元素

function fac(name) {
  this.name = name;
  this.count = 0;
}

var cats = ['cat1', 'cat2', 'cat3', 'cat4', 'cat5']

function $(name) {
  return document.querySelector(name);
}
var html = "";
for (var i = 0; i < cats.length; i++) {
  var cat = new fac(cats[i])
  html += "<div>";
  html += "<div>" + cat.name + "</div>";
  var elem = document.createElement('img');
  elem.src = 'https://c2.staticflickr.com/2/1126/625069434_db86b67df8_n.jpg';
  html += elem;
  html += "<div class='count " + i + "'></div>";
  html += "</div>";
  elem.addEventListener('click', function() {
    $('.count' + i).innerText = ++cat.count;
  }, false);
  $('#getClicked').innerHTML = html

}

Answer 1

您正在混合使用字符串和dom元素，但这些元素无法正常工作。只需将所有内容都作为字符串

 html += "<div>";
  html += "<div>" + cat.name + "</div>";
  var elem = "<img src='https://c2.staticflickr.com/2/1126/625069434_db86b67df8_n.jpg'>";
  html += elem;
  html += "<div class='count " + i + "'></div>";

或作为dom元素（从一开始就需要更多的学习，但从长远来看更好）

在javascript中使用innerHTML解析HTMLElmentObject

1 个答案: