点击send按钮第二次无法更新输入值、无法重复发消息如何解决

首次发送正常、第二次点击失效的核心问题出在message.innerHTML +=这行代码：

• 给元素的innerHTML做追加赋值时，浏览器会先解析原有HTML内容、拼接新内容后，完全重绘该元素下的所有子DOM节点
• 你在代码开头全局缓存的inpt、btn变量，指向的是第一次页面加载时生成的旧DOM节点，重绘后这些旧节点已经被销毁
• 第二次触发AddMessage时，你读取的inpt.value是已经销毁的旧输入框的值（永远为空），判断条件不通过，功能自然失效

改用标准DOM创建、追加方法新增消息节点，不会破坏已有DOM结构，提前缓存的节点引用始终有效，可支持连续多次发送：

var message = document.querySelector('.container');
var btn     = document.getElementById('btn');
var inpt    = document.getElementById('txt');

function AddMessage() {
  const inputVal = inpt.value.trim();
  if (inputVal != '' && isNaN(inputVal) == true) {
    // 单独创建新的消息段落节点
    const newMsgPara = document.createElement('p');
    newMsgPara.textContent = inputVal;
    // 仅把新节点追加到容器末尾，不重绘已有元素
    message.appendChild(newMsgPara);
    inpt.value = '';
  }
}

备选方案：如果一定要保留innerHTML拼接写法，需要把inpt、btn的节点获取逻辑移到AddMessage函数内部，每次触发时重新获取当前页面最新的DOM节点，但这种方式每次都会重绘全量子节点，性能较差，不推荐使用。

内容的提问来源于stack exchange，提问作者Bidjed med Soheyb Gheleb