代码之家 › 专栏 › 技术社区 › rockets4all

文件getElementbyId未找到由提取添加的元素

getelementbyid fetch async-await javascript

rockets4all · 技术社区 · 2 年前

我有一个聊天程序,在发送消息时向dom中添加一个元素。这个元素添加正确,但当我从dom中查询它时,它显示为null。我刚才对服务器进行了一次提取,但它需要等待才能使其变慢。有什么想法吗?

这是我的javascript代码

        socket.on('receive_message', async function(data) {
            let messaged_user_li = document.getElementById('messaged_user_li'+data['from_user']);
            console.log('messaged_user_li: '+messaged_user_li)
            if (messaged_user_li == null) {
                console.log('if fired')
                await fetch('/get_messaged_user/'+data['from_user']).then((response) => {
                    response.json().then((data2) => {
                        loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen);
                    });
                });
                console.log(data['from_user'])
                messaged_user_li = document.getElementById('messaged_user_li'+data['from_user']);
                //despite this element being added this log shows nulls which causes issues later on in the code.
                console.log('messaged_user_li: '+messaged_user_li)     
            }
            
            let message_user = document.getElementById('message_user'+data['from_user']);

            let message_target = document.getElementById("message_target"+data['from_user']);
            if (messaged_user_li.classList.contains('active') == false) {
                messaged_user_li.classList.add('flash-message');
            }
            if (message_user != null) {
                data = `
                <li class="clearfix">
                    <div class="message-data text-right">
                        <span class="message-data-time">just now</span>
                    </div>
                    <div class="message other-message float-right">`+data['message']+`</div>
                </li>`;
                message_target.innerHTML += data;
                //Move scroller to bottom when message received
                myDiv = message_user.querySelector(".chat-history");
                myDiv.scrollTop = myDiv.scrollHeight;
            }
        });

1 回复 | 直到 2 年前

mochaccino 2 年前

您只需等待此承诺完成:

await fetch('/get_messaged_user/'+data['from_user']).then((response) => {
    // ...
});

不是回调中的这个:

response.json().then((data2) => {
    loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen);
});

这就是为什么代码继续执行并尝试获取添加的元素(尚未添加)。

要解决此问题,可以将 then 电话:

await fetch('/get_messaged_user/'+data['from_user'])
    .then((response) => response.json())
    .then((data2) => loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen));

或使用 await 再次强调:

const response = await fetch('/get_messaged_user/'+data['from_user']);
const data2 = await response.json();
loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen);