Почему не работает скрипт (js)?

Question

[Hyubert]

Привет, мне нужно что б если елементов списка больше 5 остальние скриваллись и появлялась кнопка смотреть все.
Попробовал реализовать но почему то не работает. Помогите пожалуста, где я допустил ошибку? Спасибо.

document.onload(function () {
  var ul = document.getElementsByClassName('test');
  var liLenght = ul.childNodes.length;
  var span = document.getElementsByClassName('span');

  span.style.display = 'none';

   if (liLenght >= 5) {
       span.style.display = 'block';
         for(var i = 5; i <= liLenght; i++){
           delete ul.childNodes[i];
           console.log(i);
         };
   }
  console.log(ul);
  console.log(span);

});

Answer 1

[Alex Zeit]

ошибка везде....

(function() {
  'use strict';

(function () {
  var ul = document.querySelector('#test');
  var li = [].slice.call(ul.querySelectorAll('li'));
  var span = document.querySelector('#span');
  span.style.display = 'none';

  li.forEach(function (item, i) {
    if (i > 4) {
      item.style.display = 'none';
    }
  });
  if (li.length > 4) {
    span.style.display = 'block';
    span.addEventListener('click', function (e) {
      li.forEach(function (item) {
        item.style.display = 'list-item';
      });
      span.style.display = 'none';
    });
  }
})();

jsfiddle

Comments

[Hyubert]

Стрелочная функция (=>) кросбраузерная?

[Alex Zeit]

Hyubert:
замените на function() просто ))

[Hyubert]

Alex Zeit: хорошо, спасибо

[Alex Zeit]

ваша основная ошибка document.getElementsByClassName - это возвращает нодлист а не елемент
и поэтому нужно преобразовывать его в массив и в цикле с ним работать

childNodes - это в принципе любые чайлды - текст, елементы (а не только li)

delete ul.childNodes[i];
вообще непонятно зачем вы удаляете? вам же нужно было скрыть их...

вообще как я и написал - ошибка на ошибке

[Hyubert]

Alex Zeit: Вот это понять не могу li.forEach, можете обяснить?

[Alex Zeit]

Hyubert:
var i = 0;
for (i; i < li.length; i++) {
if (i > 4) {
li[i].style.display = 'none';
}
}
можно написать так

[Alex Zeit]

forEach - для каждого елемента массива( li ) мы проверяем текущий индекс - если он больше 4 - скрываем елемент

[Alex Zeit]

я бы вам порекомендовал почитать https://learn.javascript.ru/array-iteration

[Hyubert]

Alex Zeit: читал, и к этому оесуосу обращаюсь, но без практики забиваеться, может знаете где можно попрактивоться на реальних примерах, а не на учебных заданиях?

[Alex Zeit]

на работе)

[Hyubert]

Alex Zeit: но если я ничего не могу зделать , меня никуда не возьмут, даже на стажировку, я не встречал роботодателей которие готови учить

[Alex Zeit]

Hyubert: извините - но я ничем вам не помогу. пробуйте, учитесь - учебные задания это примеры которые также встречаются в реальных проектах - поэтому я не вижу проблем в практике на таких примерах

[Hyubert]

Alex Zeit: спасибо

[Hyubert]

Alex Zeit: можете подсказать где найти ментора?

[Alex Zeit]

Hyubert: https://toster.ru/search?q=%D0%BC%D0%B5%D0%BD%D1%8...