如何將這些數組值全部打印成html表單？

Question

我有一小段代碼生成一個基於三角形的值的數組。 我將在下面發布數組。

var endwallPanelLengths = [totalHeightInches];
var i = 0;
while (endwallPanelLengths[i] > eaveInches) 
{
    endwallPanelLengths.push(endwallPanelLengths[i] - peakHeightDecrease);
    document.getElementById("test83").value="4 - " + endwallPanelLengths[i];
    i++;
}

此數組將包含2到100個索引。 我希望代碼將由break分隔的所有值寫入帶有id =“test83”的<textarea> 。
如果我按照上面設置的那樣運行代碼，它只會在array [1]而不是[0]或其他任何一個中寫入值。 我怎么能讓它寫出所有這些，以便它們看起來像這樣......

4 - 140這是數組位置[0]的值

4 - 126

4 - 116等等？

Answer 1

你不斷更換價值

document.getElementById("test83").value="4 - " + endwallPanelLengths[i];

您需要附加到該值

document.getElementById("test83").value += "4 - " + endwallPanelLengths[i] + "\n";

更好的是，建立值並設置一次值

var endwallPanelLengths = [totalHeightInches],
    i = 0,
    output = [];
while (endwallPanelLengths[i] > eaveInches) 
{
    endwallPanelLengths.push(endwallPanelLengths[i] - peakHeightDecrease);
    output.push("4 - " + endwallPanelLengths[i]);
    i++;
}
document.getElementById("test83").value = output.join("\n");

Answer 2

如果我正確地理解你，你希望數組在textarea每行顯示一個項目，那么你應該能夠完全拋棄你的循環，並且只需一次性完成。

document.getElementById("test83").value = endwallPanelLengths.join('\n');

雖然看起來你也在為每個值加上'4 - '。 如果是這種情況，那么你可以添加一個額外的步驟來添加這些四肢：

var arr = endwallPanelLengths.map(function(item){ return '4 - ' + item; });
document.getElementById("test83").value = arr.join('\n');

如果你需要支持IE8，請務必從這里獲取Array.prototype.map的墊片

Answer 3

HTML：

<div id="holder"></div>

JavaScript的：

var endwallPanelLengths = [totalHeightInches];
var i = 0;
var holder =  document.getElementById("holder");
while (endwallPanelLengths[i] > eaveInches) 
{
    endwallPanelLengths.push(endwallPanelLengths[i] - peakHeightDecrease);
    var e = document.createElement('div');
    e.innerHTML = "4 - " + endwallPanelLengths[i] + "<br />";
    holder.appendChild(e.firstChild);
    i++;
}

希望這對你有所幫助。 在您的示例中，在循環中，您將最新值設置為相同的元素，從而覆蓋以前的任何值。