Как записать данные из input полей в массив и сохранить их для роботы с другой функцией?

Question

[n7nix]

Проблема в том, что я не могу записать данные из input полей в массивы, которые нужны для работы в другой функции.

X<input id='xArray'>
Y<input id='yArray' >
<button id='button'>Get results</button>

При нажатии на кнопку в консоль выводиться просто пустой массив, и ничего не сохраняется. Пожалуйста, объясните что конкретно я делаю не так и каким образом можно исправить?

var inputValX,
    inputValY,
    button = document.getElementById('button'),
    xArr = [],
    yArr = [];

button.addEventListener('click', function() {
    inputValX = document.getElementById('xArray').value;
    xArr = inputValX.split(',');
    inputValY = document.getElementById('yArray').value;
    yArr = inputValY.split(',');
});

console.log(xArr, yArr);
//Array [  ] Array [  ]

Answer 1

[Stalker_RED]

Сейчас вызов console.log() происходит до того, как вы нажали на кнопку, а при нажатии на кнопку ничего не выводится.

Перенесите его вот сюда:

Answer 2

[Falseclock]

Все у вас работает...

просто вы в консоль делайте принтаут до того как кликнули по кнопку

https://jsfiddle.net/Falseclock/1rhae30o/

Answer 3

[n7nix]

Falseclock , Stalker_RED Большое спасибо за ответ, но мне хотелось еще узнать, почему я не могу использовать эти данные для работы в другой функции и вывести результат работы функции в третий input? То есть при нажатии, данные работы функции не выводятся в 3ий input.

X<input id='xArray'>
Y<input id='yArray' >
<button id='button'>Get results</button>
result<input id='result'></input>

var button = document.getElementById('button'),
    xArr = [],
    yArr = [];

document.getElementById('button').onclick = function() {
        xArr = document.getElementById('xArray').value.split(',');
        yArr = document.getElementById('yArray').value.split(',');
};


function discretization(x, y) {
  //some code
}

window.onload = function() {
    document.getElementById('result').innerHTML = discretization(xArr, yArr);
}

Comments

[Falseclock]

смотря что вы делаете с данными... Учтите, что по умолчанию они являются текстом и соответственно мат операции не будут производиться. Нужно либо parseInt или parseFloat делать.

[Falseclock]

Ну и вызов discretization должен производиться не в onload, а после клика.

document.getElementById('button').onclick = function() {
        xArr = document.getElementById('xArray').value.split(',');
        yArr = document.getElementById('yArray').value.split(',');

        discretization(xArr, yArr);
};

[Falseclock]

а внутри функции discretization уже делайте присвоение

function discretization(x, y) {
  //some code
document.getElementById('result').value = some value;
}

[Stalker_RED]

window.onload запустится сразу после загрузки страницы. На кнопку вы к тому времени не успеете нажать, даже если очень постараетесь. Значит в момент выполнения вашего some code ваши массивы будут пустыми.

xArr = [],
yArr = [];

И зря вы пишете дополнение к вопросу в поле "ВАШ ОТВЕТ НА ВОПРОС". Я уже маякнул модератору.

[n7nix]

Stalker_RED Прошу прощения, не заметил.
Falseclock Stalker_RED большое спасибо за помощь!