javascript - HTML li 元素不会异常(exception)

Question

我正在查看这个 signalR 示例: https://learn.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio .

一切正常，“发送”按钮将用户和消息发送到服务器端 signalR 聊天中心。然后，集线器将用户和消息发送回所有客户端 Javascript 中集线器连接对象上的“ReceiveMessage”函数回调。我有一堆 console.log 语句，显示用户和消息到达服务器并返回。

但是有一个编码消息变量，您可以将其分配给 li 元素，该元素会添加回 DOM 中的元素。

但是在Javascript中，如果我尝试将encodeMsg分配给li，执行就会停止。如果我分配静态值“Hello”，它将继续执行并工作。

这是 signalR“ReceiveMessages”回调:

connection.on("ReceiveMessage", function (user, message) {
console.log("In client side: ReceiveMessage");
console.log(`user: ${user}`);
console.log(`message: ${message}`);
var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(`msg: ${msg}`);
var encodeMsg = user + " says " + msg;
console.log(`encodeMsg: ${encodeMsg}`);
var li = document.createElement("li");
console.log(`li: ${li}`);
li.textContent = 'Hello'; //encodedMsg;
console.log(`li.textContent: ${li.textContent}`);
document.getElementById("messagesList").appendChild(li);
});

这里 li.textContent 获取一个值:

但是如果我尝试添加实际的encodedMsg，它似乎就会停止执行:

connection.on("ReceiveMessage", function (user, message) {
    console.log("In client side: ReceiveMessage");
    console.log(`user: ${user}`);
    console.log(`message: ${message}`);
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    console.log(`msg: ${msg}`);
    var encodeMsg = user + " says " + msg;
    console.log(`encodeMsg: ${encodeMsg}`);
    var li = document.createElement("li");
    console.log(`li: ${li}`);
    /*li.textContent = 'Hello'; //encodedMsg; */
    li.textContent = encodedMsg;
    console.log(`li.textContent: ${li.textContent}`);
    document.getElementById("messagesList").appendChild(li);
    });

我不太擅长 JavaScript。有谁明白为什么它不想将动态encodeMsg var分配给li textContent？

Answer 1

你有一个错字。您将变量定义为 encodeMsg (注意缺少 d)，但您将其用作 encodedMsg