提交后在同一表单页面上加载数据

Question

我在这个大学任务中遇到了一个小问题。当用户输入他们的数据时，创建帐户ID号。我已经完成了这项工作，它的工作方式应该如此。但问题出在这里：用户点击提交按钮并创建帐户ID号后，他们输入的内容需要显示在其下方。赋值说我需要创建一个名为displayNewAccount的函数，并将其放入其他函数中。我放入createEventListeners函数。该文本需要在HTML页面上的自定义ID（account）中显示。输入第一个名称输入（fnameinput）的数据应显示在＆＃34; First Name＆＃34;之后。 （fname）和姓氏输入（lnameinput）应在＆＃34;姓氏＆＃34;之后显示。 （lname）等等。如果displayNewAccount函数必须在另一个函数内移动，那么这完全没问题。我已经在网上找了几个例子，但是我无法让它为我工作。我究竟做错了什么？谢谢你的帮助。

HTML

<article>
 <h2>New Account Information</h2>
 <form>
  <fieldset id="deliveryinfo">
   <label>First Name</label><input type="text" id="fnameinput" name="fname">
   <label>Last Name</label><input type="text" id="lnameinput" name="lname">
   <label>Street Address</label><input type="text" id="addrinput" name="address">
   <label>City</label><input type="text" id="cityinput" name="city">
   <label>State</label><input type="text" id="stateinput" name="state">
   <label>Zip</label><input type="text" id="zipinput" name="zip">
   <label>Account ID</label><input type="text" id="accountidbox" name="accountid">
   <input type="button" id="submitBtn" value="Create Account">
  </fieldset>
  <!-- New section -->
  <fieldset>
   <div id="account">
    <!-- Data is displayed in here. -->
   </div>
  </fieldset>
 </form>
</article>

的JavaScript

var newAccountObject = {};
var newAccountSubmission;

function createID() {
 var fname = document.getElementById("fnameinput");
 var lname = document.getElementById("lnameinput");
 var zip = document.getElementById("zipinput");
 var account = document.getElementById("accountidbox");
 var fields = document.getElementsByTagName("input");
 var acctid;
 var firstInit;
 var lastInit;
 if (fname !== "" || lname !== "" || zip !== "") {
  firstInit = fname.value.charAt(0).toUpperCase();
  lastInit = lname.value.charAt(0).toUpperCase();
  acctid = firstInit + lastInit + zip.value;
  account.value = acctid;
  newAccountObject = {};
  for(var i = 0; i < fields.length - 1; i++) {
   newAccountObject[fields[i].name] = fields[1].value;
  }
 }
}

function createString() {
 newAccountSubmission = JSON.stringify(newAccountObject);
}

function createEventListeners() {
 var fname = document.getElementById("fnameinput");
 var lname = document.getElementById("lnameinput");
 var zip = document.getElementById("zipinput");
 if (fname.addEventListener) {
  fname.addEventListener("change", createID, false);
  lname.addEventListener("change", createID, false);
  zip.addEventListener("change", createID, false);
 }
 else if (fname.attachEvent) {
  fname.attachEvent("onchange", createID);
  lname.attachEvent("onchange", createID);
  zip.attachEvent("onchange", createID);
 }
 if (button.addEventListener) {
  button.addEventListener("click", createString, false);
 }
 else if (button.attachEvent) {
  button.attachEvent("onclick", createString);
 }


 // Displays an account summary section when the "Create Account" button is clicked.
 function displayNewAccount() {
  document.getElementById("account").innerHTML = "First Name: " + fname + "<br>" + "Last Name: " + lname + "<br>" + "Address: " + addrinput + "<br>" + "City: " + cityinput + "<br>" + "State: " + stateinput + "<br>" + "Zip: " + zipinput + "<br>" + "Account ID: " + accountidbox;
 }

 if (window.addEventListener) {
  window.addEventListener("click", displayNewAccount, false);
 }
 else if (window.attachEvent) {
  window.attachEvent("onclick", displayNewAccount);
 }


}

if (window.addEventListener) {
 window.addEventListener("load", createEventListeners, false);
}
else if (window.attachEvent) {
 window.attachEvent("onload", createEventListeners);
}