Как привязать вызов функции к нескольким элементам (input) одновременно?

Как переформулировать функцию `cc_format` для улучшения ее читабельности и эффективности? Также, как можно изменить обработчик события `onload` для правильного привязывания функции `cc_format` к полю ввода с классом `.cardNumber` и `.cardNumber2`? Как можно изменить функцию `checkDigit` для обработки события ввода и проверки на недопустимые символы?
  • 12 ноября 2023 г. 17:39
Ответы на вопрос 1
1. Чтобы привязать вызов функции к нескольким элементам одновременно, вы можете использовать метод `querySelectorAll`, чтобы выбрать все нужные элементы, и затем использовать цикл для привязки функции к каждому элементу:

```javascript
const elements = document.querySelectorAll('input');
elements.forEach(function(element) {
  element.addEventListener('input', checkDigit);
});
```

2. Для улучшения читабельности и эффективности функции `cc_format`, вы можете использовать регулярные выражения для удаления всех нечисловых символов из введенного значения и добавления пробелов после каждых 4 цифр:

```javascript
function cc_format() {
  const cardNumber = this.value.replace(/\D/g, '');
  const formattedValue = cardNumber.replace(/(\d{4})/g, '$1 ').trim();
  this.value = formattedValue;
}
```

3. Чтобы правильно привязать функцию `cc_format` к полю ввода с классом `.cardNumber` и `.cardNumber2` при загрузке страницы, вы можете использовать событие `DOMContentLoaded` вместо `onload`:

```javascript
document.addEventListener("DOMContentLoaded", function() {
  const elements = document.querySelectorAll('.cardNumber, .cardNumber2');
  elements.forEach(function(element) {
    element.addEventListener('input', cc_format);
  });
});
```

4. Чтобы изменить функцию `checkDigit` для обработки события ввода и проверки на недопустимые символы, вы можете использовать регулярное выражение, чтобы проверить, содержит ли ввод только допустимые символы:

```javascript
function checkDigit(event) {
  const regex = /^[0-9\s]+$/;
  const input = event.target.value;
  if (!regex.test(input)) {
    // Обработка недопустимых символов
  }
}
```
Похожие вопросы