Javascript数组动态填充
Javascript数组动态填充
提问于 2011-08-02 11:42:52
我是WebDevelopment的新手，我遇到了以下问题。我有一个定义文本框的html文件，还有一个“查看所有内容”按钮。
- 用户可以在文本框中输入一个值并提交数据
- ，然后每次输入新值时都重复此操作多次
- ，此值应存储在Javascript数组
- 中，用户在单击“查看所有内容”按钮时将能够查看Javascript数组的内容。
因此，我的问题是这些值如何动态地存储在Javascript中，并在用户完成时打印出来。
非常感谢你的回答。
诚挚的问候
奥尔加
回答 4
Stack Overflow用户
发布于 2011-08-02 11:48:42
一个非常简单的例子：http://jsfiddle.net/pimvdb/unEMp/。
<input type="text" id="textbox">
<br>
<input type="button" id="add" value="Add">
<br>
<input type="button" id="view" value="View all Contents">通过以下方式：
var arr = []; // the array
document.getElementById('add').onclick = function() {
arr.push(document.getElementById('textbox').value); // add textbox value to array
document.getElementById('textbox').value = ''; // clear textbox value
};
document.getElementById('view').onclick = function() {
alert(arr.join(', ')); // alert array contents as a string; elements are delimited by ', '
};Stack Overflow用户
发布于 2011-08-02 11:52:02
首先，您需要在全局范围内创建数组--这意味着在方法主体之外，在<script></script>主体中的某个地方：
var myArray = new Array();接下来，您将希望每次用户单击一个按钮时都添加一个新值：
function myButtonClick(){
var myTb = document.getElementById("textBox1");
myArray.push(myTb.value);
myTb.value = ""; // reset the textbox
} 接下来，您需要另一个按钮处理程序来单击“查看所有”：
function myViewAllButtonClick(){
// will create a string of myArray's values, seperated by new line character
var msg = myArray.join("\n");
// will show the user all of the values in a modal alert
alert(msg);
}您的HTML看起来可能如下：
<input type="text" id="textBox1" />
<input type="button" id="button1" value="Add Value" onclick="myButtonClick();"/>
<input type="button" id="button2" value="Show All" onclick="myViewAllButtonClick();"/>当你掌握了事物的诀窍时，你可以把“增值”按钮全部去掉，然后使用：
<input type="text" id="textBox1" onchange="onTextChanged(this)"/>有一个处理程序，如：
function onTextChanged(e){
if(e.value == "") return;
myArray.push(e.value);
e.value = "";
}当用户更改textbox中的文本时，onTextChanged处理程序将触发(在文本框失去焦点之前，它不会触发，这可能会使其对本例不利，但仍然是一个很好的JS技能来学习/理解)。
编码快乐-祝你好运！
B
Stack Overflow用户
发布于 2011-08-02 11:46:57
可以动态地更改JavaScript数组：
var array = [];
function foo() {
array.push('foo');
}
function boo() {
array.push('boo');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6911472
复制相关文章
相似问题
腾讯云开发者
