Ошибка происходит из-за некорректного обращения с var
и замыканиями.
Из-за того что var
хойстится (hoisting) на верх до определения функции, переменная i
после окончания цикла становится равной elem.length
, соответственно elem[i]
указывает на несуществующий индекс. Обработчик события oninput
срабатывает только после завершения цикла, значение переменной i
берется через ссылку на область видимости (через замыкание) родительской функции, в i
у него будет равно elem.length
.
Пара замечаний:
- Для предотвращения действия по умолчанию лучше вызывать
preventDefault
. return false
работает только если обработчик добавляется через "on<событие>", что может вызвать ошибки если в будущем изменится способ привязки события.
- Кроме того постоянно вызывать
querySelector
для получения одних и тех же узлов крайне нежелательно, т.к. обход DOM дерева довольно дорогая операция. Лучше один раз выбрать узел и сохранить его в локальную переменную. Это также улучшит читаемость кода.
Решение:
Проблему с замыканием можно решить одним из перечисленных способов:
Запоминать значение переменной при помощи создания дополнительного замыкания
for (var i = 0; elem.length > i; i++) {
var maxValueNode = elem[i].querySelector(".features-elem__symbols-number")
var maxValueInit = parseFloat(maxValueNode.textContent);
var counterNode = elem[i].querySelector(".symbol-counter__input");
counterNode.setAttribute("maxlength", maxValueInit);
counterNode.oninput = (function(maxValueNode, maxValueInit){ return function(e) {
//Создаём отдельное замыкание на каждую итерацию,
//для сохранения значений maxValueInit и maxValueNode.
if (e.target.value.length > maxValueInit) {
e.preventDefault();
} else {
maxValueNode.innerHTML = maxValueInit - e.target.value.length;
}
}})(maxValueNode, maxValueInit);
}
Прибиндить (сделать bind с доп. параметрами) oninput
значения i или интересующих вас узлов.
function inputSymbolCounter() {
var elem = document.querySelectorAll(".symbol-input__counter");
for (var i = 0; elem.length > i; i++) {
var maxValueNode = elem[i].querySelector(".features-elem__symbols-number")
var maxValueInit = parseFloat(maxValueNode.textContent);
var counterNode = elem[i].querySelector(".symbol-counter__input");
counterNode.setAttribute("maxlength", maxValueInit);
counterNode.oninput = function(maxValueNode, maxValueInit, e) {
// Бинд сохранит для нас значения переданных переменных
// и передаст их в качестве первых агрументов функции при её вызове.
if (e.target.value.length > maxValueInit) {
e.preventDefault();
} else {
maxValueNode.innerHTML = maxValueInit - e.target.value.length;
}
}.bind(this, maxValueNode, maxValueInit);
}
}
inputSymbolCounter()
.features-elem__field {
position: relative;
height: 35px;
}
.features-elem__field-textarea {
position: relative;
height: 70px;
}
.features-elem__input {
width: 100%;
position: absolute;
left: 0;
height: 35px !important;
padding-right: 125px;
padding-left: 10px;
border-radius: 5px !important;
}
.features-elem__input:active,
.features-elem__input:focus {
border: 1px solid #5ed1b5;
}
.features-elem__symbols {
font-size: 10px;
position: absolute;
right: 15px;
top: 50%;
transform: translatey(-50%);
z-index: 1;
color: #5ed1b5;
}
<div class="features-elem__field symbol-input__counter">
<input type="text" class="features-elem__input symbol-counter__input" maxlength>
<div class="features-elem__symbols">
<span class="features-elem__symbols-arrow"><</span>
<span class="features-elem__symbols-number">15</span>
<span class="features-elem__symbols-text">sym</span>
</div>
</div>
<div class="features-elem__field symbol-input__counter">
<input type="text" class="features-elem__input symbol-counter__input" maxlength>
<div class="features-elem__symbols">
<span class="features-elem__symbols-arrow"><</span>
<span class="features-elem__symbols-number">35</span>
<span class="features-elem__symbols-text">sym</span>
</div>
</div>
Заменить запомнить значения elem[i]
в переменной с let
или const
и использовать их внутри oninput
. let
и const
создаются в области видимости цикла, поэтому каждый обработчик в цикле будет импть со
function inputSymbolCounter() {
const elem = document.querySelectorAll(".symbol-input__counter");
for (let i = 0; elem.length > i; i++) {
// Переменные объявленные через const или let не хойстятся.
// Они создаются на каждой итерации заново.
// Благодаря этому обработчики получают значения которые были на сомент их создания
const maxValueNode = elem[i].querySelector(".features-elem__symbols-number")
const maxValueInit = parseFloat(maxValueNode.textContent);
const counterNode = elem[i].querySelector(".symbol-counter__input");
counterNode.setAttribute("maxlength", maxValueInit);
counterNode.oninput = function(e) {
if (e.target.value.length > maxValueInit) {
e.preventDefault();
} else {
maxValueNode.innerHTML = maxValueInit - e.target.value.length;
}
};
}
}
inputSymbolCounter();