Question

我在点击按钮的鼠标按钮上向DOM添加元素。

该元素正在添加到DOM中，我可以在检查时看到它。但是在同一个鼠标中 - 在将元素添加到DOM之后 - 我想操纵该元素，但我无法这样做，因为当DOM第一次加载时，带有它的唯一id的新元素不存在周围。

我收到此错误，因为新创建的元素实际上不存在：Uncaught TypeError: Cannot set property 'innerHTML' of null

我如何更新＆＃39; DOM中存在什么，以便JS可以看到改变了什么并识别出任何新元素和ID？

＆＃13;

const likeWrapper = document.getElementById("likeWrapper");
let yourLikeTotal = 0;
let mouseDown = 0;
const yourLikes = document.getElementById("yourLikes_postid_" + yourLikeTotal);

document.body.onmousedown = function() { ++mouseDown }
document.body.onmouseup = function() { --mouseDown }


const addToYourLikes = () => {
  console.log(yourLikeTotal)
  console.log(yourLikes)
  yourLikes.innerHTML = yourLikeTotal
  yourLikeTotal++
  console.log("addToYourLikes");
}

const moveYourLikes = () => {
  yourLikes.classList.add("move-your-likes")
  setTimeout( () => { 
  yourLikes.classList.remove('move-your-likes');
    console.log("remove class")
}, 800);
  console.log("moveYourLikes");
}

const addEl = () => {
  const id = "yourLikes_postid_" + yourLikeTotal;
  const div = '<div id=' + id + ' ' + 'class="your-likes">0</div>';
  likeWrapper.innerHTML += div;
}


likeWrapper.addEventListener("mouseup", () => {
  /* if mousedown and up execute 1 button animation -
  while mousedown do not end animation, just keep adding to totals
  */
  addEl();
  addToYourLikes();
  moveYourLikes();
})

＆＃13;

body {
  font-family: sans-serif;
  font-size:13px;
  user-select: none;
}

main {
  margin: 160px 0 0 0;
  width: 100%;
}

.like-button-wrapper {
  display:flex;
  width: 30px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
}

.like-button {
  position:absolute;
  z-index:1;
  width:30px;
  height:30px;
  border:2px solid red;
}

.like-total {
  line-height:30px;
  margin: 0 0 0 40px;
}

.your-likes {
  width:20px;
  height:20px;
  font-size:10px;
  text-align:center;
  border-radius: 50%;
  background:#989898;
  color:#fff;
  position:absolute;
  left:5px;
  z-index:0;
  line-height:20px;
  margin: 0 10px 0 0;
  opacity:1;
}

.move-your-likes {
  -webkit-animation-name: moveLikes;
  -webkit-animation-duration: 0.8s;
}

@keyframes moveLikes {
  from { top:0; opacity:0; }
  to { top: -40px; opacity:1; }
}

＆＃13;

  <div class="like-button-wrapper" id="likeWrapper">
    <div class="like-button" id="likeButton"></div>
  </div>

＆＃13;

Answer 1

如果您希望事件处理程序附加到动态添加的元素，则必须将它们作为＆＃34;节点＆＃34; （document.createElement()）进入DOM（.appendChild()），而不是HTML字符串（.innerHTML）。

此外，在创建元素之前，您无法设置DOM const yourLikes引用。在将它添加到DOM之后，您必须这样做。因此，它最初需要声明为var或let变量，然后仅在DOM元素存在于DOM之后才初始化。

＆＃13;

const likeWrapper = document.getElementById("likeWrapper");
let yourLikeTotal = 0;
let mouseDown = 0;
var yourLikes = null; // Can't get reference here. It doesn't exist yet!

document.body.onmousedown = function() { ++mouseDown }
document.body.onmouseup = function() { --mouseDown }


const addToYourLikes = () => {
  console.clear();
  console.log(yourLikes, yourLikeTotal)
  yourLikes.innerHTML = yourLikeTotal
  yourLikeTotal++
  // console.log("addToYourLikes");
}

const moveYourLikes = () => {
  yourLikes.classList.add("move-your-likes")
  setTimeout( () => { 
  yourLikes.classList.remove('move-your-likes');
    // console.log("remove class")
}, 800);
  // console.log("moveYourLikes");
}

const addEl = () => {
  const id = "yourLikes_postid_" + yourLikeTotal;
  // New elements should be created and inserted as nodes:
  const div = document.createElement("div");
  div.id = id;
  div.classList.add("your-likes");
  div.textContent = "0";
  likeWrapper.appendChild(div);
  yourLikes = div;  // Now, set the higher scoped variable to the new element
}


likeWrapper.addEventListener("mouseup", () => {
  /* if mousedown and up execute 1 button animation -
  while mousedown do not end animation, just keep adding to totals
  */
  addEl();
  addToYourLikes();
  moveYourLikes();
})

＆＃13;

body {
  font-family: sans-serif;
  font-size:13px;
  user-select: none;
}

main {
  margin: 160px 0 0 0;
  width: 100%;
}

.like-button-wrapper {
  display:flex;
  width: 30px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
}

.like-button {
  position:absolute;
  z-index:1;
  width:30px;
  height:30px;
  border:2px solid red;
}

.like-total {
  line-height:30px;
  margin: 0 0 0 40px;
}

.your-likes {
  width:20px;
  height:20px;
  font-size:10px;
  text-align:center;
  border-radius: 50%;
  background:#989898;
  color:#fff;
  position:absolute;
  left:5px;
  z-index:0;
  line-height:20px;
  margin: 0 10px 0 0;
  opacity:1;
}

.move-your-likes {
  -webkit-animation-name: moveLikes;
  -webkit-animation-duration: 0.8s;
}

@keyframes moveLikes {
  from { top:0; opacity:0; }
  to { top: -40px; opacity:1; }
}

＆＃13;

<div class="like-button-wrapper" id="likeWrapper">
    <div class="like-button" id="likeButton"></div>
  </div>

＆＃13;

向DOM添加元素，但JS并不知道它

1 个答案: