Не совпадает разность длин в цикле
 

Привет! Есть такая задача: в инпут вводятся названия стран через запятую. Есть список из 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 раз. Подскажите, что за магия!

ошибка в том что getElementsByTagName живая коллекция, и с каждой итерацией его length увеличивается.
делайте так.

var x = inputValue.length - li.length;
for (var j = 0; j < x; j++)

Alessio18911,
а не проще создавать список из слов, каждый раз заново, и убрать сравнение длин.

Уф... Нежданчик!:) Я знал про "живые" и "неживые" объекты, но до сих пор встречалась обратная ситуация - когда надо было ещё раз перебирать элементы, чтобы "обновить" его. И я думал, что "мёртвость" querySelectorAll - это его отрицательный момент, а "живость" getElements - это неоспоримое преимущество! Оказывается, всё же у каждой медали 2 стороны ) Буду знать, спасибо большое за ответ! :)

Может быть ) Но пока не представляю, как это сделать. И в условии задачи сказано, что пунктов не может быть меньше двух ) Т.е. получается, что если слов больше, то просто создаются новые пункты и вставляются для "невлазящих" слов. А если меньше - то лишние li должны удаляться, но их всегда должно быть минимум 2. Спасибо, что не прошли мимо :)

Alessio18911,
а если ввели одно слово тогда как? и откуда взять два первых?

оставить пустые, или дать им undefined :) все по феншую

j0hnik,
:-? не осилил ваш ответ, давайте подождём, что ответит автор темы.

рони,
юмор :cray: