Какую ошибку допустил в данном случае?

Question

[Aison]

Консоль ничего не выдаёт...

function cc_format(value) {
  var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
  var matches = v.match(/\d{4,16}/g);
  var match = matches && matches[0] || ''
  var parts = []
  for (i=0, len=match.length; i<len; i+=4) {
    parts.push(match.substring(i, i+4))
  }
  if (parts.length) {
    return parts.join(' ')
  } else {
    return value
  }
}

/* такой вариант не работает. никаких ошибок в консоле нет. */
onload = function() {
    var inputus = document.querySelectorAll(".cardNumber");
    for (i = 0; i < inputus.length; i++) {
      inputus[i].addEventListener.oninput = function() {
        this.value = cc_format(this.value)
      }
    }
}
/* такой вариант не работает. никаких ошибок в консоле нет. */

function checkDigit(event) {
    var code = (event.which) ? event.which : event.keyCode;

    if ((code < 48 || code > 57) && (code > 31)) {
        return false;
    }

    return true;
}

Answer 1

[Михаил Р.]

А где объявление i? Попробуйте так:

for (let i = 0, len = match.length; i < len; i += 4) {
  parts.push(match.substring(i, i + 4));
}

Очень интересная конструкция addEventListener.oninput = function(). Попробуйте так:

inputus[i].addEventListener('input', () => {
  this.value = cc_format(this.value);
});

UPD: не ожидал обнаружить this, соответственно использовал стрелочную функцию по дефолту (а у нее нет собственного this). Вариант с this:

for (let i = 0; i < inputus.length; i++) {
  inputus[i].addEventListener('input', function() {
  this.value = cc_format(this.value);
});

Comments

[Aison]

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

[Aison]

на каждый input я повесил класс cardNumber

[Михаил Р.]

Aison,

второй вариант работает, но только на один input

Обновил ответ.

ведь querySelectorAll получает несколько node элементов, но их нужно обрабатывать в цикле

Верно.

[Aison]

Михаил Р., Спасибо!

Answer 2

[Сергей]

addEventListener.oninput

wtf?

inputus[i].addEventListener('input', function() {
  this.value = cc_format(this.value);
});