[Alessio18911]

Привет! Есть такая задача: в инпут вводятся названия стран через запятую. Есть список из 2-х пунктов. При нажатии кнопки, если количество введённых слов больше, чем пунктов, создать и добавить в список новые, чтобы их количество совпадало. Это немного кастрированное описание, т.к. у меня на определённом этапе возникла проблема. Вот разметка:

<input type="text" id="input">
<ul>
    <li></li>
    <li></li>
</ul>
<button id="btn">Вывести значения в списке</button>

Вот код:

var input = document.getElementById('input'),
          ul = document.getElementsByTagName('ul')[0],
        btn = document.getElementById('btn');

btn.onclick = () => {
    var inputValue = input.value.split(',');    
    var li = document.getElementsByTagName('li');
    
    if (inputValue.length == li.length) {
        for (var i = 0; i < li.length; i++) {
    	    li[i].textContent = inputValue[i];
    	}
    } else if (inputValue.length > li.length) {    
         for (var j = 0; j < inputValue.length - li.length; j++) {
    	     var newLi = document.createElement('li');
    	     ul.appendChild(newLi);    			
    	 }    		
    }
 };

И вот проблема: ввожу 4 страны через запятую. Т.е. разница в длине имеющегося списка и количества стран - 2. Если напрямую прописать 2 в цикл строка 14 - всё работает корректно. Если в виде разницы длин, как сейчас, создаёт на 1 пункт меньше. Пытался смотреть через console.log - всё отлично, изначально длина имеющегося списка 2, стран 4, разница, соответственно, 2. А цикл крутится только 1 раз. Подскажите, что за магия!