点击添加选项按钮后页面刷新所有HTML元素消失问题排查

页面刷新、动态内容丢失的核心原因是表单内按钮的默认提交行为触发了页面重载：

• 你把问卷容器放在了<form>标签内部
• 动态生成的「添加选项」「删除问题」「保存问题」按钮都没有显式设置type="button"，浏览器会默认将表单内无type指定的按钮识别为提交按钮
• 点击按钮时先执行了你写的添加选项逻辑，逻辑执行完后触发表单默认提交事件，页面重载，所有动态生成的DOM元素全部被清空。你调试时看到选项生成成功、方法退出后内容消失，完全符合这个触发流程。

1. 给所有表单内的动态按钮显式设置button类型 #

修改newOpQuestion函数里的按钮创建逻辑，给三个动态生成的button补上type属性：

function newOpQuestion(questionNumber) {
    optionsQN++;
    document.getElementById('numberOfOptionsQuestions').innerHTML = "Option Questions = " + optionsQN;
    var question = document.createElement('div');
    var nameDiv = document.createElement('div');
    var removeButton = document.createElement('button');
    var saveButton = document.createElement('button');
    var unorderedList = document.createElement('ul');
    var addOptionButton = document.createElement('button');

    // 新增：给所有按钮设置type=button，阻止默认提交行为
    removeButton.type = "button";
    saveButton.type = "button";
    addOptionButton.type = "button";

    // 剩下的原有逻辑保持不变
    var questionId = "question" + "" + questionNumber;
    var nameDivId = "label" + "" + questionNumber;
    var removeButtonId = "removeButton" + "" + questionNumber;
    var saveButtonId = "saveButton" + "" + questionNumber;
    var addOptionButtonId = "addOptionButton" + "" + questionNumber;
    question.id = questionId;
    nameDiv.id = nameDivId;
    removeButton.id = removeButtonId;
    saveButton.id = saveButtonId;
    addOptionButton.id = addOptionButtonId;
    removeButton.className = "remove-qu";
    saveButton.className = "save-qu";
    nameDiv.className = "questionName";
    question.className = "opQuestion";
    addOptionButton.className = "add-li";
    nameDiv.appendChild(document.createTextNode('Your Question'));
    removeButton.appendChild(document.createTextNode('Remove Question'));
    saveButton.appendChild(document.createTextNode('Save Question'));
    addOptionButton.appendChild(document.createTextNode('Add Option'));
    question.append(nameDiv);
    question.append(removeButton);
    question.append(saveButton);

    question.append(unorderedList)
    question.append(addOptionButton);
    questionnaire.append(question);
    newOption(unorderedList);
}

2. （可选兜底）点击事件里阻止默认行为 #

在全局点击回调开头加一行阻止默认事件的代码，避免后续新增按钮忘加type导致同类问题：

questionnaire.onclick = ev => {
    ev.preventDefault(); // 新增这行兜底
    if (ev.target.tagName === "BUTTON") {
        switch (ev.target.className) {
            case "remove-qu":
                switch (ev.target.parentNode.className) {
                    case "opQuestion":
                        optionsQN--;
                        document.getElementById('numberOfOptionsQuestions').innerHTML = "Option Questions = " + optionsQN;
                        break;
                }
                ev.target.parentNode.remove();
                break;
            case "add-li":
                newOption(ev.target.closest(".opQuestion").querySelector('ul'), true)
                break;
        }
    }
    else {
        switch (ev.target.className) {
            case "remove-li":
                optionsCounter--;
                optionsVector.pop(ev.target);
                ev.target.parentNode.remove();
                break;
            case "save-li":
                saveEdits(ev.target);
                break;
        }
    }
}

其他冗余代码清理 #

你在点击添加选项按钮调用newOption时传了多余的第二个参数true，但newOption函数定义并没有接收这个参数，属于无效代码，可以删掉：

// 修改前
case "add-li":
    newOption(ev.target.closest(".opQuestion").querySelector('ul'), true)
    break;

// 修改后
case "add-li":
    newOption(ev.target.closest(".opQuestion").querySelector('ul'))
    break;

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