尝试查询按钮元素的路径时获取 Null

Question

问题：

我想在我的文档中返回与指定选择器匹配的按钮元素，在本例中为 ".comment-body__interaction--delete"，但每次我 console.log 包含返回元素的变量时都会返回 null。

背景信息

1. 我尝试定位的 HTML 元素已通过 innerHTML 插入到文档中。
2. 我所有的脚本都在 index.html 页面的底部
3. 我在js文档底部使用querySelector。
4. 我知道我的类名是正确的，因为我可以通过 CSS 设置它的样式。

我的代码

// LOCATION VARIABLES ***
const conversation = document.querySelector('.conversation-container-posted');
const form = document.querySelector('form');
console.log(form);
// Array THAT HOLDS ALL MY COMMENT OBJECTS
let objectsArray;

// VARIABLE THAT HOLDS MY HTML TEMPLATE
const template = (singleCommentObj) => {
  return `
  <article class="comment-container">
  <figure class="comment-container__picture">
    <img class="comment-container__picture-img" src="${singleCommentObj.image}" alt="profile picture" />
  </figure>
  <div class="comment-body">
    <h3 class="comment-body__name">${singleCommentObj.name}</h3>
    <div class="comment-body__date">${singleCommentObj.date}</div>
    <article class="comment-body__comment"><p>${singleCommentObj.comment}</p></article>
    <div class="comment-body__interaction">
      <div class="comment-body__interaction--likes">Likes</div>
      <button id="${singleCommentObj.id}" class="comment-body__interaction--delete">Delete</button>
    </div>
  </div>
  </article>
  <hr class="comment-container__divider"/>
  `;
};

const displayComment = (object) => {
  let staticComments = object
    .sort((a, b) => b.timestamp - a.timestamp)
    .map((values) => {
      values.image = 'https://loremflickr.com/48/48';
      values.date = moment.unix(values.timestamp / 1000).fromNow();
      return template(values);
    })
    .join('');
  conversation.innerHTML = staticComments;
};

// Gets AN ARRAY OF OBJECTS FROM THE api AND ASSIGNS IT TO objectsArray
// CALLS displayComment WITH objectsArray AS A PARAMETER TO INSERT ITS CONTENT INTO THE DOM
axios
  .get('https://project-1-api.herokuapp.com/comments?api_key=7d8d085e-486e-42dc-b836-58009cbfa68f')
  .then((response) => {
    objectsArray = response.data;
    displayComment(objectsArray);
  })
  .catch((error) => {
    console.log(error);
  });

form.addEventListener('submit', (e) => {
  e.preventDefault();
  let fluidObject = new FormData(e.target);
  fluidObject = Object.fromEntries(fluidObject);
  axios
    .post('https://project-1-api.herokuapp.com/comments?api_key=7d8d085e-486e-42dc-b836-58009cbfa68f&content-type=application/json', {
      name: fluidObject.name,
      comment: fluidObject.comment,
    })
    .then((response) => {
      objectsArray.push(response.data);
      displayComment(objectsArray);
    })
    .catch((error) => {
      console.log(error);
    });
});

// DELETE
const a = document.querySelector('.comment-body__interaction--delete');
console.log(a);

此 console.log(a) 返回 NULL

Answer 1

创建上述元素displayComment 的代码在异步操作回调中。

在尝试访问元素之前，您必须等待操作完成。

换句话说，const a = document.querySelector('.comment-body__interaction--delete'); 在您的请求成功并创建元素之前执行。