Javascript массив динамическая популяция - PullRequest
Новая
       2

Javascript массив динамическая популяция

1 голос
/ 02 августа 2011

Я новичок в WebDevelopment и столкнулся со следующей проблемой.У меня есть HTML-файл, в котором определено текстовое поле, а также кнопка «Просмотреть все содержимое»

  1. Пользователь может ввести значение в текстовое поле и отправить данные
  2. Затем повторитеэто действие несколько раз
  3. Каждый раз, когда вводится новое значение, это значение должно быть сохранено в массиве Javascript
  4. Пользователь сможет просматривать содержимое массива Javascript при нажатии на кнопку«Просмотреть все содержимое».

Поэтому моя проблема заключается в том, как эти значения динамически хранятся в Javascript и печатаются после завершения работы пользователя.

Ваш ответ очень ценится.*

С наилучшими пожеланиями

Ольга

Ответы [ 4 ]

1 голос
/ 02 августа 2011

Очень тривиальный пример: 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 ', '
};
1 голос
/ 02 августа 2011

Сначала вы захотите создать свой массив в глобальной области видимости - это означает вне тела метода, где-то в <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 для изучения / понимания).

Удачного кодирования - удачи!

B

0 голосов
/ 02 августа 2011

Я собрал небольшой пример: 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>
0 голосов
/ 02 августа 2011

Массив JavaScript может быть динамически изменен: 

var array = [];

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

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