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

我对这项大学作业有个小问题。当用户输入数据时，将创建一个帐户id号。我已经在这方面下了工夫，它的工作原理应该是这样的。但问题是：在用户单击submit按钮并创建帐户id号后，他们输入的内容需要显示在下面。作业中说我需要创建一个名为

displayNewAccount

的函数，并将其放入其他函数中。我在

createEventListeners

函数中加入了。文本需要在HTML页面上的自定义ID（

帐户

）中显示。输入到名字输入（

fnameinput

）中的数据应显示在“名字”（

fname

）之后，而姓氏输入（

lnameinput

）应显示在“姓氏”（

lname

）之后，依此类推。如果必须将

displayNewAccount

函数移到另一个函数中，则完全可以。我在网上找到了几个例子，但我无法让它们为我工作。我做错了什么？谢谢你的帮助

HTML

新帐户信息
名字
姓
街道地址
城市
陈述
拉链
帐户ID

JavaScript

var newAccountObject={}；
提交新的会计报表；
函数createID（）{
var fname=document.getElementById（“fnameinput”）；
var lname=document.getElementById（“lnameinput”）；
var zip=document.getElementById（“zipinput”）；
var account=document.getElementById（“accountidbox”）；
变量字段=document.getElementsByTagName（“输入”）；
var acctid；
var-firstInit；
var-lastInit；
如果（fname！=“”| | lname！=“”| | zip！=“”）{
firstInit=fname.value.charAt（0.toUpperCase（）；
lastInit=lname.value.charAt（0.toUpperCase（）；
acctid=firstInit+lastInit+zip.value；
account.value=acctid；
newAccountObject={}；
对于（变量i=0；i“+”姓氏：“+lname+”
“+”地址：“+addrinput+”
“+”城市：“+cityinput+”
”+”州：“+stateinput+”
“+”邮政编码：“+zipinput+”
“+”账户ID:“+accountidbox；
}
if（window.addEventListener）{
window.addEventListener（“单击”，显示NewAccount，false）；
}
else if（窗口附件）{
window.attachEvent（“onclick”，displayNewAccount）；
}
}
if（window.addEventListener）{
addEventListener（“加载”，createEventListeners，false）；
}
else if（窗口附件）{
attachEvent（“onload”，createEventListeners）；
}

如果我运行您的代码，控制台中会出现错误：“If（button.addEventListener）”按钮未定义。您能提供一个JSFIDLE工作环境吗？出于某种原因，它在JSFIDLE上不起作用，但在这里是。JSFIDLE ok，但错误仍然存在。第43-44-46-47行（Javascript面板）中未定义中的按钮。出现此错误时，名为createEventListeners的函数不会绑定click侦听器。

<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>

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);
}