Javascript 向数组中添加名称并将其输出到表中_Javascript

Javascript 向数组中添加名称并将其输出到表中

javascript

Javascript 向数组中添加名称并将其输出到表中,javascript,Javascript,我的代码无法正常工作。这就是我目前所拥有的 function outputNamesAndTotal() { var name; var outputTable; var inputForm; var nameArray; var outputDiv; outputDiv = document.getElementById("outputDiv"); inputForm = document.getElementById("inputForm"); output

我的代码无法正常工作。这就是我目前所拥有的

function outputNamesAndTotal() {
  var name;
  var outputTable;
  var inputForm;
  var nameArray;
  var outputDiv;

  outputDiv = document.getElementById("outputDiv");
  inputForm = document.getElementById("inputForm");
  outputTable = document.getElementById("outputTable");
  name = inputForm.name.value;
  nameArray = [];

  nameArray.push(name);


  for (var i = 0; i > nameArray.length; i++) {

    outputTable.innerHTML += "<tr>" + nameArray[i] + "</tr>";

  }    

  inputForm.name.focus();
  inputForm.name.select();


  return false;

}

函数outputNamesAndTotal（）{
变量名；
可输出的var；
var输入形式；
变量名称数组；
var输出div；
outputDiv=document.getElementById（“outputDiv”）；
inputForm=document.getElementById（“inputForm”）；
outputTable=document.getElementById（“outputTable”）；
name=inputForm.name.value；
nameArray=[]；
nameArray.push（name）；
对于（var i=0；i>nameArray.length；i++）{
outputTable.innerHTML+=“”+nameArray[i]+“”；
}    
inputForm.name.focus（）；
inputForm.name.select（）；
返回false；
}

当我添加循环时，它会完全破坏代码，但我不知道为什么

我试图做的是使用HTML表单从用户那里获取名称。用户输入名称后，程序将名称添加到数组中，并将每个数组项输出到表中的一行

这是相当基本的，但它仍然给我带来各种各样的麻烦

我想你的意思是


我想你的意思是I
我想你每次调用函数时都在清除名称数组。你应该带上电话：
nameArray = [];

走出去，走向全球
我运行了一个快速测试，下面的代码至少可以在FireFox中运行
编辑以使用appendChild
<html>
<head>
<script type='text/javascript'>
var names = [];
function addName() {
    var nameTxt = document.getElementById('name_txt');
    var name = nameTxt.value;
    names.push(name);
    var outTable = document.getElementById('out_tbl');

    var row = document.createElement('tr');
    var entry = document.createElement('td');
    var txt = document.createTextNode(name);

    entry.appendChild(txt);
    row.appendChild(entry);
    outTable.appendChild(row);


    var numDiv = document.getElementById('num_div');
    removeAllChildren(numDiv);
    var numTxt = document.createTextNode('You have ' + names.length + ' names');
    numDiv.appendChild(numTxt);
}
function removeAllChildren(e) {
    while (e.hasChildNodes()) {
        e.removeChild(e.firstChild);
    }
}
</script>
</head>
<body>
    <table id='out_tbl'>
    </table>
    <div id='num_div'>You have 0 names</div>
    <input id='name_txt' type='text'/>
    <button onclick="addName()">CLICK</button>
</body>
</html>


变量名称=[]；
函数addName（）{
var nameTxt=document.getElementById（'name_txt'）；
var name=nameTxt.value；
name.push（name）；
var outTable=document.getElementById（'out_tbl'）；
var行=document.createElement（'tr'）；
var entry=document.createElement（'td'）；
var txt=document.createTextNode（名称）；
entry.appendChild（txt）；
行。追加子项（条目）；
outTable.appendChild（行）；
var numDiv=document.getElementById（'num_div'）；
移除所有儿童（numDiv）；
var numText=document.createTextNode（'您有'+names.length+'names'）；
numDiv.appendChild（numText）；
}
函数removeAllChildren（e）{
while（e.hasChildNodes（））{
e、 removeChild（如第一个孩子）；
}
}
你有0个名字
点击

编辑：哦，是的，你每次都在数组中循环。如果“全球化”名称数组，则每次添加名称时都会打印整个数组
编辑x2:您最初发布的代码在函数中使用了nameArray作为局部变量。这将在每次调用函数时有效地清除数组。然后每次调用该函数时，将当前名称添加到现在为空的数组中，并循环遍历该数组现在包含的所有1（一）个元素
您要做的是“全球化”名称数组，并从函数中删除循环。这将允许您跨多个调用构建名称数组，并按照您希望的方式工作
此外，innerHTML并不是向页面添加内容的最佳方式。我建议使用appendChild（）
-C
我认为您每次调用函数时都在清除名称数组。你应该带上电话：
nameArray = [];

走出去，走向全球
我运行了一个快速测试，下面的代码至少可以在FireFox中运行
编辑以使用appendChild
<html>
<head>
<script type='text/javascript'>
var names = [];
function addName() {
    var nameTxt = document.getElementById('name_txt');
    var name = nameTxt.value;
    names.push(name);
    var outTable = document.getElementById('out_tbl');

    var row = document.createElement('tr');
    var entry = document.createElement('td');
    var txt = document.createTextNode(name);

    entry.appendChild(txt);
    row.appendChild(entry);
    outTable.appendChild(row);


    var numDiv = document.getElementById('num_div');
    removeAllChildren(numDiv);
    var numTxt = document.createTextNode('You have ' + names.length + ' names');
    numDiv.appendChild(numTxt);
}
function removeAllChildren(e) {
    while (e.hasChildNodes()) {
        e.removeChild(e.firstChild);
    }
}
</script>
</head>
<body>
    <table id='out_tbl'>
    </table>
    <div id='num_div'>You have 0 names</div>
    <input id='name_txt' type='text'/>
    <button onclick="addName()">CLICK</button>
</body>
</html>


变量名称=[]；
函数addName（）{
var nameTxt=document.getElementById（'name_txt'）；
var name=nameTxt.value；
name.push（name）；
var outTable=document.getElementById（'out_tbl'）；
var行=document.createElement（'tr'）；
var entry=document.createElement（'td'）；
var txt=document.createTextNode（名称）；
entry.appendChild（txt）；
行。追加子项（条目）；
outTable.appendChild（行）；
var numDiv=document.getElementById（'num_div'）；
移除所有儿童（numDiv）；
var numText=document.createTextNode（'您有'+names.length+'names'）；
numDiv.appendChild（numText）；
}
函数removeAllChildren（e）{
while（e.hasChildNodes（））{
e、 removeChild（如第一个孩子）；
}
}
你有0个名字
点击

编辑：哦，是的，你每次都在数组中循环。如果“全球化”名称数组，则每次添加名称时都会打印整个数组
编辑x2:您最初发布的代码在函数中使用了nameArray作为局部变量。这将在每次调用函数时有效地清除数组。然后每次调用该函数时，将当前名称添加到现在为空的数组中，并循环遍历该数组现在包含的所有1（一）个元素
您要做的是“全球化”名称数组，并从函数中删除循环。这将允许您跨多个调用构建名称数组，并按照您希望的方式工作
此外，innerHTML并不是向页面添加内容的最佳方式。我建议使用appendChild（）
-C
我必须使用innerHTML来完成此任务。我对javascript和一般的编码还是相当陌生的。我让代码开始工作，但直到我尝试显示数组中的名称总数。当我尝试添加代码以显示总数时，它会打断outputTable.innerHTML代码，并在我尝试输入第二个名称后刷新页面。当我输入第一个名字时，它只显示总输出。我不知道为什么它会第二次刷新，但不是第一次。哦，好吧，这是有道理的。你能像我的例子一样把名字的数目放在一个单独的div中吗？如果是这样，只需获取该div（我们称之为numDiv）并调用numDiv.innerHTML=“youhave”+nameArray.length+“names”；我需要使用innerHTML来完成这项任务。我对javascript和一般的编码还是相当陌生的。我让代码开始工作，但直到我尝试显示数组中的名称总数。当我试图添加代码来显示总数时，它会中断outputTable.inne