非提交按钮绑定onClick后输入框数据消失（疑似页面刷新）原因排查

开发者阿泽

2026-6-19

问题原因与修复方案：点击按钮后输入框值消失

问题根源

并非页面刷新导致输入值丢失，问题出在函数里的这行代码：

fieldset.innerHTML += "<br />";

当使用innerHTML +=操作DOM时，浏览器会执行以下步骤：

将目标元素（这里是fldset_1）的现有DOM结构转换成字符串
拼接上新的HTML字符串（<br />）
把拼接后的字符串重新解析成新的DOM元素

这个过程中，原来的输入框会被完全销毁后重新创建，新生成的输入框不会保留之前的输入值，所以看起来像是值"消失"了。

而当你把标签添加到另一个fieldset时，操作的是fldset_2的innerHTML，不会影响fldset_1内的输入框，因此输入值不会丢失。

修复方案

不要用innerHTML +=来添加换行，改用createElement创建<br>元素并追加到DOM中，和创建标签的方式保持一致：

修改后的createNxtRound函数：

function createNxtRound()
{
    const fieldset = document.getElementById("fldset_1");
    const lbl = document.createElement("label");
    lbl.setAttribute("style", "width:100%; background-color:yellow; color:black; font-weight:bold");
    // 建议用textContent替代innerHTML，避免XSS风险
    lbl.textContent = "Player " + document.getElementById("noOfPlayers").value + " has entered round " + document.getElementById("noOfRounds").value;
    fieldset.appendChild(lbl);                
    // 替换innerHTML +=，手动创建br元素并添加
    const br = document.createElement("br");
    fieldset.appendChild(br);
}