在 Javascript 中将表单附加到结果页面答案

【问题标题】：Append form to a result page in Javascript在 Javascript 中将表单附加到结果页面
【发布时间】：2022-01-05 09:19:44
【问题描述】：

我对 Javascript 还是很陌生。我正在尝试向我的 Javascript 测验结果页面添加一个表单元素。

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 = "Quiz is over and final score is: " + timeleft;
    welcometxt.appendChild(allDoneEl);
    // Create a form
    const f = document.createElement("form"); 
    // Add it to the document body
    document.body.appendChild(f); 
    

           
    
}

我想要做的是跟随显示“你的分数是”的结果页面我需要一个表单元素让用户输入他们的姓名首字母并提交。

【问题讨论】：

您可能应该对表单的工作原理进行更多研究。一个表单没有任何表单控件让用户输入任何内容然后提交表单是没有用的
一个很好的起点是查看docs 中的示例，看看您是否可以获得工作原型。

标签： javascript append

【解决方案1】：

const f = document.createElement("form");

//Add an input element to form
const input = document.createElement("input");
f.appendChild(input);

// Add it to the document body
document.body.appendChild(f);

【讨论】：

【解决方案2】：

 // create a form for accepting the initial
    var inputForm = document.createElement("form");
    inputForm.setAttribute("id", "inputForm");

    //Add an input element to form
    var inputText = document.createElement("input");
    inputText.setAttribute("type", "text");
    inputText.setAttribute("id", "initialstext");
    inputText.setAttribute("placeholder", "Enter your initials");
    inputForm.appendChild(inputText);

    // Add it to the document body
    scoresSection.appendChild(inputForm);
    // create a button for submitting the form
    var submitBtn = document.createElement("button");
    submitBtn.setAttribute("id", "submitBtn");
    submitBtn.setAttribute("style", "float: center; position: relative;");
    submitBtn.innerHTML = "Submit";
    scoresSection.appendChild(submitBtn);

我试过了，效果很好。谢谢@MrCano369

【讨论】：