Javascript如何在测验结果页追加带姓名首字母提交功能的表单

你只需要在已创建的form节点下补充输入组件、提交按钮，再绑定提交事件即可实现需求，修改后的完整代码如下：

function viewResultPage() {
    console.log("viewResult Page: ", currentQuestionIndex, " ", timeleft);
    // inner html Sets or returns the content of an element
    welcometxt.innerHTML = ""
    var allDoneEl = document.createElement("span");
    allDoneEl.innerHTML = "测验结束，你的最终得分是：" + timeleft;
    welcometxt.appendChild(allDoneEl);
    // 创建表单
    const f = document.createElement("form"); 
    // 将表单加入页面
    document.body.appendChild(f); 

    // 新增：输入提示标签
    const nameLabel = document.createElement('label')
    nameLabel.textContent = '请输入姓名首字母：'
    f.appendChild(nameLabel)

    // 新增：姓名首字母输入框
    const nameInput = document.createElement('input')
    nameInput.type = 'text'
    nameInput.name = 'initial'
    nameInput.maxLength = 3 // 最多输入3位首字母，可按需调整
    nameInput.required = true // 设为必填，避免空提交
    f.appendChild(nameInput)

    // 新增：提交按钮
    const submitBtn = document.createElement('button')
    submitBtn.type = 'submit'
    submitBtn.textContent = '提交成绩'
    f.appendChild(submitBtn)

    // 新增：表单提交事件处理
    f.addEventListener('submit', function(e) {
      // 阻止表单默认的页面刷新行为
      e.preventDefault()
      const userInitial = nameInput.value.trim()
      const userScore = timeleft
      // 此处可拓展后续逻辑，示例为存入本地存储做成绩排行
      const scoreList = JSON.parse(localStorage.getItem('quizScores')) || []
      scoreList.push({
        name: userInitial,
        score: userScore
      })
      localStorage.setItem('quizScores', JSON.stringify(scoreList))
      // 提交后的交互可自行修改，示例为提示+移除表单
      alert('成绩提交成功')
      f.remove()
    })
}

关键说明 #

• 输入框设置了maxLength和required属性，你可以根据实际需求调整规则
• 提交事件里默认实现了本地存储成绩的逻辑，如果你需要上传到后端、跳转到排行榜页，直接在提交事件的回调里修改对应代码即可
• 所有表单元素都挂载在你之前创建的form节点下，会自动显示在得分提示的下方

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