ScaleDrone中name值为undefined求助：输入回车后无法赋值

你的判断是对的——页面加载时就执行了getName()并赋值给drone的data.name，此时用户还未输入内容；再加上原getName()函数逻辑存在错误，导致name始终是undefined：

• 原函数里的回车事件回调是异步触发的，函数本身会立刻返回初始的输入框DOM元素，而非用户输入的值；
• 代码还存在语法错误：if语句后缺少大括号，return位置错误（放在事件回调内部根本不会执行）。

修正方案 #

1. 先初始化ScaleDrone实例，给name设个默认值避免undefined；
2. 单独监听输入框的回车事件，获取用户输入后，调用ScaleDrone的updateClientData()方法更新用户名；
3. 修正事件监听的语法问题。

修改后的完整代码 #

const CHANNEL_ID = 'qqxtR1YAPcD40c4W';
const drone = new ScaleDrone(CHANNEL_ID, {
  data: { // 初始化时设默认值
    name: '匿名用户',
    color: getRandomColor(),
  }
});

// 监听输入框回车事件，更新drone客户端数据
function setupNameInput() {
  const userNameInput = document.getElementById("typeUserName");
  userNameInput.addEventListener("keypress", (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      const userName = userNameInput.value.trim();
      if (userName) { // 确保输入不为空
        drone.updateClientData({
          name: userName,
          color: drone.clientData.color // 保留原来的随机颜色
        });
        console.log('用户名已更新:', userName);
      }
    }
  });
}

// 页面加载完成后初始化监听
document.addEventListener('DOMContentLoaded', setupNameInput);

// 保留原创建成员元素的函数
function createMemberElement(member) {
  const { name, color } = member.clientData;
  const el = document.createElement('div');
  el.appendChild(document.createTextNode(name));
  el.className = 'member';
  el.style.color = color;
  return el;
}

说明 #

• 用户按下回车后，updateClientData()会更新当前客户端的data，其他连接到同一频道的客户端会收到member_updated事件，从而获取到新的用户名；
• 原createMemberElement函数无需修改，它会从更新后的member.clientData中读取最新的用户名。

内容的提问来源于stack exchange，提问作者Tai