JavaScript использовать одну и ту же функцию для разных идентификаторов - PullRequest
Новая
       16

JavaScript использовать одну и ту же функцию для разных идентификаторов

1 голос
/ 19 апреля 2020

У меня есть форма с несколькими полями даты. Эти поля даты являются фактическими текстовыми полями, так как я хочу контролировать структуру даты с самого начала. 

<div class="form-group col-md-6 col-xs-13">
  <?php echo form_error('eindDatum'); ?>
  <label for="eindDatum"><?php echo $this->lang->line('eindDatum'); ?><small class="text-info"><?php echo ' ' . $this->lang->line('datumNotatie'); ?></small></label>
  <input type="text" name="eindDatum" id="eindDatum" class="form-control date" placeholder="DD-MM-YYYY" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}">
</div>
<div class="form-group col-md-6 col-xs-13">
  <?php echo form_error('aanvangDatum'); ?>
  <label for="aanvangDatum"><?php echo $this->lang->line('aanvangDatum'); ?><small class="text-info"><?php echo ' ' . $this->lang->line('datumNotatie'); ?></small></label>
  <input type="text" name="aanvangDatum" id="aanvangDatum" class="form-control date" placeholder="DD-MM-YYYY" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}">

</div>

Я искал в Интернете форматер для автоматической вставки - (da sh) между структурами. Но мои знания о JavaScript действительно ограничены. Я попытался с помощью селектора классов, но это, кажется, не работает вообще. 

var date = document.getElementsByClassName('date');

И затем я добавил класс даты в поля ввода текста

Я (пытаюсь ) работа с этим https://codepen.io/tutsplus/pen/KMWqRr

Любая помощь будет принята с благодарностью. Если возможно, скажите мне, почему вы подходите к нему определенным образом c, чтобы я мог учиться на вашем опыте.

1 Ответ

3 голосов
/ 19 апреля 2020

В ссылке, которой вы поделились, они являются applying функцией единственного element, поскольку они получают его по id.

В вашем случае вы пытались получить его по class в этом случае он не будет работать, потому что переменная date будет содержать collection из elements, поэтому вам нужно l oop над этой коллекцией, чтобы правильно добавить прослушиватель событий для каждого element.

Ваш код должен выглядеть следующим образом: 

var dates = document.getElementsByClassName('date');

Array.from(dates).forEach(function(element) {
  element.addEventListener('input', inputFunction);
  element.addEventListener('blur', blurFunction);
});

Примечание:

Я сделал две функции для обоих events, все, что вам нужно сделать, это поместить код в список событий в вашей ссылке соответственно внутри этих двух функций: 

function inputFunction(e) {
   //The input event code will be here
   ...
}

function blurFunction(e) {
   //The blur event code will be here
   ...
}
...