将名称添加到阵列并将它们输出到表格

我在使代码正常工作时遇到了一些麻烦。这是我迄今为止所拥有的。将名称添加到阵列并将它们输出到表格

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; 

}

当我添加循环它彻底打破了代码，但我不明白为什么。

我想要做的是使用HTML表单从用户获取一个名称。一旦用户输入名称，程序就会将名称添加到数组中，并将每个数组条目输出到表中的一行中。

这是非常基本的，但它仍然给我各种麻烦！

来源

2009-12-16 javanewb123

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

我想你的意思i < nameArray.length

来源

2009-12-16 02:25:21

我认为你是清除每次调用函数时名称的数组。你应该带上这条线：

nameArray = [];

out and make it global。

我跑了快速测试和下面的代码在至少火狐

编辑使用的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>

编辑：哦，是的，你是，你是循环的事实通过阵列每次。如果您将名称数组“全局化”，则每次添加名称时都要打印整个数组。

编辑x2：您最初发布的代码具有nameArray作为函数内的局部变量。每次调用该函数时都会有效地清除数组。然后，每次调用函数时，都会将当前名称添加到现在为空的数组中，并遍历数组现在保存的所有1（一个）元素。

你想做的是“全球化”名称数组，并从函数中删除循环。这将允许您跨多个调用构建您的名称数组，并以您希望的方式工作。

另外，innerHTML并不是真正的将页面添加到页面的最佳方式。我会建议使用appendChild（）。

-C

来源

2009-12-16 02:31:09 goatlinks

我需要为此作业使用innerHTML。对于JavaScript和编码，我仍然很新。我得到的代码工作，但只有直到我尝试显示数组中的名称总数。当我尝试添加代码以显示总数时，它会中断outputTable.innerHTML代码并在尝试输入第二个名称后刷新页面。当我输入名字时，它只显示总输出。我不确定为什么它会刷新第二次，但不是第一次刷新。 – javanewb123 2009-12-16 03:29:22

哦，好吧，这是有道理的。你能把名字的数目放在一个单独的div中吗？如果是这样，只是得到该div（让我们称之为numDiv），并呼吁 numDiv.innerHTML =“你有”+ nameArray.length +“名称”; – goatlinks 2009-12-16 03:34:52

将名称添加到阵列并将它们输出到表格

回答

相关问题