Question

我在WebDevelopment中是全新的，我遇到了以下问题。我有一个html文件，其中定义了文本框以及“查看所有内容”按钮

用户可以在文本框中输入值并提交数据
然后多次重复此操作
每次输入新值时，此值都应存储到a Javascript数组
用户将能够查看Javascript数组的内容点击“查看所有内容”按钮时。

所以我的问题是如何在Javascript中动态存储这些值并在用户完成时打印。

非常感谢您的回答。

最好的问候

奥尔加

Answer 1

一个非常简单的例子：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 ', '
};

Answer 2

首先，您需要在全局范围内创建数组 - 这意味着在<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 = "";
}

onTextChanged处理程序将在用户更改文本框中的文本时触发（它不会触发，直到文本框失去焦点，这可能会使这个示例变坏，但仍然是一个很好的学习/理解的JS技能）。

快乐的编码 - 祝你好运！

乙

Answer 3

可以动态更改JavaScript数组：

var array = [];

function foo() {
  array.push('foo');
}

function boo() {
  array.push('boo');
}

Answer 4

我把一个小例子放在一起：http://jsbin.com/izumeb/3

<p><input type="text" id="txt"></input><button onclick="addToAll();">add to selection</button></p> 
<p><button onclick="showAll();">show all</button></p> 
<p id="all"></p>

和JS

<script> 
var values = [];

function addToAll() {
  var txt = document.getElementById("txt");
  values.push(txt.value);

  txt.value = "";
}

function showAll() {
  var all = document.getElementById("all");
  var str = "";
  for (var i=0;i<values.length;++i) {
    str += values[i] + "<br/>";
  }

  all.innerHTML = str;
}
</script>

Javascript数组动态人口

4 个答案: