Question

网页上有一个textarea，用户可以添加地址。用户可以通过单击“添加地址”按钮输入“n”个地址。当用户单击“显示地址”按钮时，输入的所有地址应按照以下格式显示在“result”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>";
    }
}

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

在Div中显示JavaScript数组元素

1 个答案: