Chatbot界面提交函数中如何获取对应msg-text元素的ID？

核心问题分析 #

1. 选择器拼写错误：元素class是msg-text，但代码里写的是$(".msf-text")，少了字母g，导致无法匹配目标元素返回undefined。
2. jQuery对象获取ID方式错误：jQuery包装对象没有.id属性，需转成DOM元素（$(".msg-text")[0].id）或使用jQuery的.attr('id')方法。
3. 多元素定位问题：直接匹配.msg-text会选中所有同类元素，必须定位到当前提交的那条消息。

具体修正方案 #

方案1：通过最新添加的元素获取ID（最直接）

提交表单后生成的消息通常是列表最后一项，直接取最后一个.msg-text元素的ID：

msgerForm.addEventListener("submit", event => {
  event.preventDefault(); // 阻止表单默认跳转行为
  // 若消息是异步生成，可加setDelay或监听DOM变化确保元素已渲染
  const msgList = document.querySelectorAll('.msg-text');
  const currentMsg = msgList[msgList.length - 1];
  const messageId = currentMsg.id;
  console.log("message id is " + messageId);
});

方案2：创建元素时直接保存引用

生成消息元素时保留引用，提交时直接用该引用获取ID：

// 生成消息的代码
const randomIndex = getRandomInt(100000000);
const messageIndex = randomIndex;
const msgElement = document.createElement('div');
msgElement.className = 'msg-text';
msgElement.id = `message-${messageIndex}`;
msgElement.textContent = text;
// 假设消息容器类名为msg-container
document.querySelector('.msg-container').appendChild(msgElement);

// 提交事件中直接使用保存的元素引用
msgerForm.addEventListener("submit", event => {
  event.preventDefault();
  const messageId = msgElement.id;
  console.log("message id is " + messageId);
});

方案3：用jQuery简化（若坚持使用jQuery）

修正选择器并直接取最后一个元素的ID：

msgerForm.addEventListener("submit", event => {
  event.preventDefault();
  const messageId = $(".msg-text:last").attr('id');
  console.log("message id is " + messageId);
});

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