javascript - 在 Div 内显示 JavaScript 数组元素

Question

网页中有一个文本区域，可供用户添加地址。用户可以通过单击“添加地址”按钮输入“n”个地址。当用户单击“显示地址”按钮时，输入的所有地址应按以下格式显示在“结果”div 标签内: 地址1

用户输入的地址

地址2

用户输入的地址

......

这是 HTML 代码

<div id="body" align="left">
    <h2>Address Details</h2>
    Enter the Address : <textarea id="address"></textarea><br>
    <button id="add" onclick="addAddress();">Add Address</button>
    <button id="display" onclick="displayAddress();">Display Address</button>
</div>
<div id="result" align="right"></div>

这是接受地址并将其存储在数组中的 JS 函数:

var address = [];

function addAddress(){
    var addr = document.getElementById("address");
    if(addr.value.replace(/^\s+|\s+$/gm,'') !=="") {
        address.push(addr.value);
        addr.value = ""; 
    }           
}

这里的函数以指定的格式显示结果div内的地址(这不起作用)

function displayAddress(){
    var display = [];
    var addrno = [];
    var result = document.getElementById("result");
    for(var i=0; i<address.length; i++){
        display[i] = address[i];
        addrno[i] = "Address "+(i+1);
    }
    result.innerHTML = addrno[i]+"<br>"+display[i]+"<br>";
}

任何帮助将不胜感激。

Answer 1

嗯，如果我正确理解你的问题，你可以尝试这样做:

function displayAddress(){
    var display = [];
    var addrno = [];
    var result = document.getElementById("result");
    for(var i=0; i<address.length; i++){
        display[i] = address[i];
        addrno[i] = "Address "+(i+1);
        result.innerHTML += addrno[i]+"<br>"+display[i]+"<br>";
    }
}

我所做的只是移动result.innerHTML += addrno[i]+"<br>"+display[i]+"<br>";在 for 循环中，以便它可以访问变量 i每次迭代并更改它，因此添加了字符串 addrno[i]+"<br>"+display[i]+"<br>";使用 += 到 DOM上result.innerHTML而不是= (所以它不会覆盖它，而是附加到它上面)