Блог

У меня есть элемент span с id=»edit-…», который находится в карточке, подобной этой. Кстати, эта карточка динамически добавляется в DOM:

             <div class="d-flex w-100 justify-content-between" style="pointer-events:none;">
            <h5 class="mb-1" style="pointer-events:none;">${post.creator}</h5>
            <small>Likes <span id="like-count-${post.id}" class="badge badge-primary badge-pill" style="pointer-events:none">${post.likes}</span></small>
            </div>
            <p class="mb-1" style="pointer-events:none;">${post.content}</p>
            <div class="d-flex w-100 justify-content-between" style="pointer-events=none;">
            <small>${post.created}amp;#8287amp;#8287<span id="edit-${post.id}">amp;#8226 EDIT</span></small>
            <div name="like-btn" id="${post.id}">
            </div>
            </a>   
  

Когда я пытаюсь получить доступ к этому элементу span непосредственно с консоли, как показано ниже, он работает отлично:

 > document.querySelector('span[id="edit-4"]')
  

или я даже попробовал это, и это все еще работало:

 > const tweet = 4
> document.querySelector(`span[id="edit-${tweet}"]`)
  

Однако, когда я пытаюсь сделать это из функции и распечатать на консоль, он продолжает возвращать значение null, и я не могу понять, почему?

 function editButton(creator, post){
    const currentUser = document.querySelector('#signed-in-user').innerText;
    const tweet = post
    
    if(creator != currentUser){
        const editBtn = document.querySelector(`span[id="edit-${tweet}"]`);
        console.log(document.querySelector(`span[id="edit-${tweet}"]`));
        console.log("Post ("   post   "): "   creator   " does not match logged in user");
    }
}
  

Я даже добавил эту дополнительную строку в свою функцию:

 console.log(`edit-${tweet}`)
  

чтобы увидеть, правильно ли tweet возвращает число, и это так. Кто-нибудь может увидеть, что здесь происходит?