Как уже говорилось в других ответах, код завершается сбоем, потому что он пытается найти объект DOM, который не существует.
Хотя я бы справился с этим, используя классы CSS.Я бы заменил ваш JS на:
var trigger = document.getElementsByClassName('input-trigger')
for(var i = 0; i < trigger.length; i++) {
trigger[i].addEventListener("input", addListener);
}
function addListener() {
var labels = this.parentNode.childNodes;
for(var i = 0; i < labels.length; i++) {
if (labels[i].className == 'input-validate') {
if (this.value === '') {
labels[i].style.color = "#b9c0c8";
} else {
labels[i].style.color = "#98589e";
}
}
}
}
Тогда вам просто нужно добавить класс 'input-trigger' к входам, которые вы хотите вызвать изменение цвета и 'input-validate' кметки, цвета которых вы хотите изменить.
Приведенный выше код более лаконичен.Он запускается первым классом, затем просматривает родительский элемент инициирующего элемента, а затем выбирает любые метки с классом 'input-validate' внутри этого родительского элемента.
Вот пример фрагмента этого кода:
var trigger = document.getElementsByClassName('input-trigger')
for(var i = 0; i < trigger.length; i++) {
trigger[i].addEventListener("input", addListener);
}
function addListener() {
var labels = this.parentNode.childNodes;
for(var i = 0; i < labels.length; i++) {
if (labels[i].className == 'input-validate') {
if (this.value === '') {
labels[i].style.color = "#b9c0c8";
} else {
labels[i].style.color = "#98589e";
}
}
}
}
<ul class="form-list">
<li class="form-list-row">
<label id="usernameLabel" class='input-validate'>Username or Email</label><br>
<input id="usernameInput" class='input-trigger' type="text" required>
</li>
<li class="form-list-row">
<label id="passwordLabel" class='input-validate'>Password</label><br>
<input id="passwordInput" class='input-trigger' type="password" required>
</li>
</ul>
Хотя любой из приведенных примеров будет работать, я всегда предпочитаю попробовать написать краткий код многократного использования.
Надеюсь, это поможет!