將名稱添加到陣列並將它們輸出到表格

我在使代碼正常工作時遇到了一些麻煩。這是我迄今爲止所擁有的。將名稱添加到陣列並將它們輸出到表格

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

將名稱添加到陣列並將它們輸出到表格

回答

相關問題