使用 vanilla JS 显示 Html 表单数据答案

【问题标题】：Displaying Html form data using vanilla JS使用 vanilla JS 显示 Html 表单数据
【发布时间】：2020-09-03 13:02:07
【问题描述】：

大家好，我正在开发一个简单的 javascript 程序，在该程序中添加和显示来自 html 表单的数据。除了显示数据外，没有遇到任何问题。我尝试了所有方法，但失败了，有人可以帮我吗this.Here是添加和显示的JS代码。

</style>
<script type="text/javascript">
var i=0;
function AddressRegister(Name,Type,Address,Email,Mobile,Location)
{
this.Name = Name;
this.Type = Type;
this.Address = Address;
this.Email = Email;
this.Mobile = Mobile;
this.Location = Location;
}
var flag = 0;
var tabledata,button;
var dataArray = new Array();
function Add()
{
var Name=document.getElementById("name").value;
var Types=document.getElementsByName("type");
for(i = 0; i < Types.length; i++) { 
    if(Types[i].checked) 
    var Type = Types[i].value; 
}
var Address=document.getElementById("address").value; 
var Email=document.getElementById("email").value;
var Mobile=document.getElementById("mobile").value;
var Location=document.getElementById("location").value;

var data = new AddressRegister(Name,Type,Address,Email,Mobile,Location);
dataArray.push(data);
displayAddress();
}
function displayAddress()
{
if(flag==0)
{
tabledata = "<table style='position: fixed; background-color:lightgrey; border: 1px solid black; 
border-collapse: collapse;  margin-top: 25px;' border = '1'><tr><th>Name</th><th>Type</th> 
<th>Address</th><th>Email</th><th>Mobile</th><th>Location</th></tr>";
}

for(i=0;i<dataArray.length;i++)
{
var tempname=dataArray[i].Name;
var temptype=dataArray[i].Type;
var tempaddress=dataArray[i].Address;
var tempemail=dataArray[i].Email;
var tempmobile=dataArray[i].Mobile;
var templocation=dataArray[i].Location;
}
//console.log(tabledata);
if(flag==0){   

document.getElementById("name").value = "";

document.getElementsByName("type").checked = false;

document.getElementById("address").value = "";

document.getElementById("email").value ="";

document.getElementById("mobile").value ="";

document.getElementById("location").value = "";
}
count=0;
}
</script>
</head>

【问题讨论】：

标签： javascript html css arrays

【解决方案1】：

尝试将整个<script> 移动为<body> 中的最后一个元素。

您的代码引用了在解析脚本时尚未呈现的元素。您的document.getElementById("name") 和其他人返回null。

或者，您可以将代码包装在 DOMContentLoaded 事件侦听器中：

window.addEventListener('DOMContentLoaded', () => {
    // your code
});

如果你通过DOMContentLoaded事件来做，你可以把你的代码保存在<head>，因为它会等到DOM准备好。

【讨论】：