Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2018, 02:27
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Не совпадает разность длин в цикле
Привет! Есть такая задача: в инпут вводятся названия стран через запятую. Есть список из 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 раз. Подскажите, что за магия!
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2018, 02:38
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

ошибка в том что getElementsByTagName живая коллекция, и с каждой итерацией его length увеличивается.
делайте так.
var x = inputValue.length - li.length;
for (var j = 0; j < x; j++)
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2018, 08:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Alessio18911,
а не проще создавать список из слов, каждый раз заново, и убрать сравнение длин.
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2018, 11:40
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Уф... Нежданчик! Я знал про "живые" и "неживые" объекты, но до сих пор встречалась обратная ситуация - когда надо было ещё раз перебирать элементы, чтобы "обновить" его. И я думал, что "мёртвость" querySelectorAll - это его отрицательный момент, а "живость" getElements - это неоспоримое преимущество! Оказывается, всё же у каждой медали 2 стороны ) Буду знать, спасибо большое за ответ!
Ответить с цитированием
  #5 (permalink)  
Старый 01.08.2018, 11:43
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Может быть ) Но пока не представляю, как это сделать. И в условии задачи сказано, что пунктов не может быть меньше двух ) Т.е. получается, что если слов больше, то просто создаются новые пункты и вставляются для "невлазящих" слов. А если меньше - то лишние li должны удаляться, но их всегда должно быть минимум 2. Спасибо, что не прошли мимо
Ответить с цитированием
  #6 (permalink)  
Старый 01.08.2018, 17:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Alessio18911,
а если ввели одно слово тогда как? и откуда взять два первых?
Ответить с цитированием
  #7 (permalink)  
Старый 01.08.2018, 19:45
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от рони
а если ввели одно слово тогда как? и откуда взять два первых?
оставить пустые, или дать им undefined все по феншую
Ответить с цитированием
  #8 (permalink)  
Старый 01.08.2018, 19:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

j0hnik,
не осилил ваш ответ, давайте подождём, что ответит автор темы.
Ответить с цитированием
  #9 (permalink)  
Старый 01.08.2018, 20:04
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
юмор
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Навешивать события в цикле Neo54213 Events/DOM/Window 3 01.08.2017 09:46
jQuery autocomplete не работает в цикле t.soyuzova jQuery 7 02.12.2015 16:00
Таймер до требуемой даты в цикле Drugpunker Events/DOM/Window 22 21.03.2014 08:52
подвисание при $.ajax() в цикле amt779 jQuery 6 15.05.2013 11:55
popup окно в PHP цикле ryobi522 Общие вопросы Javascript 5 10.02.2012 02:18