Javascript html 数组未保存和显示

Javascript html array not saving and displaying

本文关键字：显示 保存 html 数组 Javascript      更新时间：2023-09-26

由于某种原因，此代码没有将输入保存到数组中。我也无法使用循环显示数组，但我确定这与无法将元素存储在数组中有关。我该如何解决这个问题？

var full_name;
    var dob;
    var gender;
    var nameList = new Array();
    var dateList = new Array();
    var genderList = new Array();
    var listLength = nameList.length;
    function displayMembers(nameList, dateList, genderList, listLength)
    {
        var str = " ";
        for(var i = 0;i < listLength; i++) {
                document.write(nameList);
                document.write(dateList);
                document.write(genderList);
        }
    }
    function saveMember(nameList, dateList, genderList)
    {
        nameList[0]=data.push(document.getElementByName("full_name").value);
        dateList[0]=data.push(document.getElementByName("dob").value);
        genderList[0]=data.push(document.getElementByName("gender").value);
    }
    function clearList()
    {
        nameList= [];
        dateList= [];
        genderList= [];
    }
<html>
<head>
<title> INTERNET TECHNOLOGIES CLUB MEMBER LIST </title>
</head>
<body>
    <form name="memberForm">
        <h1>
        INTERNET TECHNOLOGIES CLUB MEMBER LIST
        </h1> Full name:
        <input type="text" name="full_name" value="" /> Date of Birth:
        <input type="text" name="dob" value="" />
        <br>
        <br> Gender:
        <input type="text" name="gender" value="" />
        <br>
        <br>
        <textarea name="textBox" rows="10" cols="70">
            Full Name Date of Birth Gender
        </textarea>
        <br>
        <input type="button" value="NEXT" onclick="saveMember()" />
        <input type="button" value="DISPLAY" onclick="displayMembers()" />
        <input type="button" value="CLEAR" onclick="clearList()" />
    </form>
</body>
</html>

代码中存在多个问题

var full_name;
var dob;
var gender;
var nameList = new Array();
var dateList = new Array();
var genderList = new Array();
function displayMembers() {//since the arrays are global, no need to pass them as argument
  var str = [];
  //the list length should be read in the function else it will always be 0
  var listLength = nameList.length;
  //should not use document.write() as calling it after document is loaded will completely overwrite the dom
  for (var i = 0; i < listLength; i++) {
    str.push('Name: ' + nameList[0])
    str.push('Date: ' + dateList[0])
    str.push('Gender: ' + genderList[0])
  }
  document.getElementById('display').innerHTML = str.join('<br />');
}
function saveMember() {//since the arrays are global, no need to pass them as argument
  //you need to push the values to the array, there is nothing called data
  nameList.push(document.getElementsByName("full_name")[0].value);
  dateList.push(document.getElementsByName("dob")[0].value);
  genderList.push(document.getElementsByName("gender")[0].value);
}
function clearList() {
  nameList = [];
  dateList = [];
  genderList = [];
}
<form name="memberForm">
  <h1>
INTERNET TECHNOLOGIES CLUB MEMBER LIST
</h1> Full name:
  <input type="text" name="full_name" value="" />Date of Birth:
  <input type="text" name="dob" value="" />
  <br>
  <br>Gender:
  <input type="text" name="gender" value="" />
  <br>
  <br>
  <textarea name="textBox" rows="10" cols="70">
    Full Name Date of Birth Gender
  </textarea>
  <br>
  <input type="button" value="NEXT" onclick="saveMember()">
  <input type="button" value="DISPLAY" onclick="displayMembers()">
  <input type="button" value="CLEAR" onclick="clearList()">
</form>
<div id="display">
</div>

 var full_name;
 var dob;
 var gender;
 var nameList = new Array();
 var dateList = new Array();
 var genderList = new Array();
 var listLength = nameList.length;

删除参数，因为您没有传递任何

    function displayMembers()
    {
        var str = " ";
        for(var i = 0;i < listLength; i++) {
                document.write(nameList);
                document.write(dateList);
                document.write(genderList);
        }
    }

都是全局变量。将值直接推送到数组。

    function saveMember()
    {
        nameList.push(document.getElementsByName("full_name")[0].value);
        dateList.push(document.getElementsByName("dob")[0].value);
        genderList.push(document.getElementsByName("gender")[0].value);
    }
    function clearList()
    {
      nameList= [];
      dateList= [];
      genderList= [];
    }

你的代码中有很多错误。查看差异，您将获得所需的结果

</html>
<head>
<script language = "javascript">
var full_name;
var dob;
var gender;
var nameList = new Array();
var dateList = new Array();
var genderList = new Array();

function displayMembers()
{
    var textArea = document.getElementsByName("textBox")[0];
    textArea.value +="'n"+nameList[nameList.length-1] + "'t't't"+dateList[dateList.length-1] + "'t't't"+genderList[genderList.length-1];
}
function saveMember()
{
    nametemp = document.getElementsByName("full_name");
    nameList.push(nametemp[0].value);
    datetemp = document.getElementsByName("dob");
    dateList.push(datetemp[0].value);
    gendertemp = document.getElementsByName("gender");
    genderList.push(gendertemp[0].value);
}
function clearList()
{
    nameList= [];
    dateList= [];
    genderList= [];
}
</script>
<title> INTERNET TECHNOLOGIES CLUB MEMBER LIST </title>
</head>
<body>
<form name = "memberForm">
<h1>
INTERNET TECHNOLOGIES CLUB MEMBER LIST
</h1>
Full name: <input type ="text" name= "full_name" value = ""/>
Date of Birth: <input type="text" name= "dob" value = ""/>
<br>
<br>
 Gender: <input type="text" name= "gender" value = ""/>
<br>
<br>
<textarea name="textBox"  rows = "10" cols= "70">
Full Name               Date of Birth           Gender
</textarea>
<br>
<input type= "button" value= "NEXT" onclick = "saveMember()"></button>
<input type= "button" value= "DISPLAY" onclick = "displayMembers()">    </button>
<input type= "button" value= "CLEAR" onclick = "clearList()"></button>
</form>
</body>
</html>
相关文章：