заполнить массив с помощью getElementById - PullRequest
Новая
       7

заполнить массив с помощью getElementById

0 голосов
/ 29 мая 2018

Я пытаюсь заполнить массив числами, которые есть в моем HTML-файле, с помощью getElementById.

Для HTML я пытаюсь сделать это с помощью: 

<div id="E1_INV_Funds0">1</div>
<div id="E1_INV_Funds1">2</div>
<div id="E1_INV_Funds2">3</div>
<div id="E1_INV_Funds3">4</div>
<div id="E1_INV_Funds4">5</div>
<div id="E1_INV_Funds5">6</div>
<div id="E1_INV_Funds6">7</div>
<div id="E1_INV_Funds7">8</div>

и затем используя следующий Javascript: 

<script type="text/javascript">

 var graphData = [];

 function fillData(){
   for( var i = 0; i < 8; i++ ) {
    graphData[i] = parseInt(document.getElementById("E1_INV_Funds" + i).value);
    return graphData;
   }
}

console.log(graphData);

</script>

Это ничего не возвращает.

Что вызывает такое поведение?

Ответы [ 3 ]

0 голосов
/ 29 мая 2018

Вы никогда не вызывали функцию fillData(), также есть еще несколько исправлений, замените value на innerHTML, здесь document.getElementById("E1_INV_Funds" + i).innerHTML

и выйдите за пределы цикла return graphData;

var graphData = []; /* find all where id starts with `E1_INV_Funds` */
document.querySelectorAll('[id^=E1_INV_Funds]').forEach(function(el) {
  graphData.push(+(el.textContent || el.innerHTML) || 0); /* parse as number */
});
console.log(graphData);
<div id="E1_INV_Funds0">1</div>
<div id="E1_INV_Funds1">2</div>
<div id="E1_INV_Funds2">3</div>
<div id="E1_INV_Funds3">4</div>
<div id="E1_INV_Funds4">5</div>
<div id="E1_INV_Funds5">6</div>
<div id="E1_INV_Funds6">7</div>
<div id="E1_INV_Funds7">8</div>
0 голосов
/ 29 мая 2018

Вам нужно вызвать функцию fillData, вместо прямой печати массива graphData, а также return должна быть помещена вне цикла for (как только вычисление будет выполнено).Кроме того, чтобы извлечь данные из элемента div, вам нужно использовать innerText или innerHTML согласно вашему требованию.

Найдите рабочее решение ниже. 

var graphData = [];

function fillData() {
  for (var i = 0; i < 8; i++) {
    graphData[i] = parseInt(document.getElementById("E1_INV_Funds" + i).innerText);
  }
  return graphData;
}

console.log(fillData());
<div id="E1_INV_Funds0">1</div>
<div id="E1_INV_Funds1">2</div>
<div id="E1_INV_Funds2">3</div>
<div id="E1_INV_Funds3">4</div>
<div id="E1_INV_Funds4">5</div>
<div id="E1_INV_Funds5">6</div>
<div id="E1_INV_Funds6">7</div>
<div id="E1_INV_Funds7">8</div>
0 голосов
/ 29 мая 2018

В вашем коде return немедленно завершает функцию до завершения любой из итераций.Другая проблема состоит в том, что .value работает только для элементов, подобных вводу, - для извлечения текста из div, доступа к его свойству textContent.

Как насчет использования Array.from и его встроенного map Функция ping, которая не требует внешней мутации? 

const graphData = Array.from(
  { length: 8 },
  (_, i) => Number(document.getElementById('E1_INV_Funds' + i).textContent)
);
console.log(graphData);
<div id="E1_INV_Funds0">1</div>
<div id="E1_INV_Funds1">2</div>
<div id="E1_INV_Funds2">3</div>
<div id="E1_INV_Funds3">4</div>
<div id="E1_INV_Funds4">5</div>
<div id="E1_INV_Funds5">6</div>
<div id="E1_INV_Funds6">7</div>
<div id="E1_INV_Funds7">8</div>

Array.from({ length }, mapFn) - это просто функциональный способ создания нового массива длины length.Передача объекта со свойством length в Array.from создает массив undefined s, а второй аргумент такой же, как Array.prototype.map, применяемый к результирующему массиву перед его возвратом.При .map первый аргумент - это значение массива (здесь бесполезно), а второй аргумент - это индекс элемента, по которому выполняется итерация, и это то, что нам нужно._ является просто индикатором того, что параметр там не будет использоваться.

См. MDN

...