Как можно написать короче и лаконичнее? Метод объекта

Question

Доброго времени суток
Функционал метода следующий:

Пушится в массив значение input.value
Если input.value.lenght >= , тогда режется с 1-го индекса до 21 и добавляется в список 21 символ + троеточие.
Если меньше, то просто пушится input.value
Мне кажется, что это можно совершенно короче записать и не повторять одинаковый код...
В стадии обучения, поэтому буду рад совету :)

        btn.addEventListener('click', (e) => {
            e.preventDefault();
            if (input.value.length <= 21) {                                      // если длинна меньше или равна 21 символу
                movieList.innerHTML = '';
                movieDB.movies.push(input.value);
                movieDB.movies.sort().forEach((film, i) => {
                    movieList.innerHTML += `
                    <li class="promo__interactive-item">${i + 1}. ${film}
                        <div class="delete"></div>
                    </li>
                    `;
                })
            } else {  
                movieList.innerHTML = '';                                        // если длинна более 21 символа
                movieDB.movies.push(input.value);
                movieDB.movies.sort().forEach((film, i) => {                                                
                    movieList.innerHTML += `
                    <li class="promo__interactive-item">${i + 1}. ${film.slice(0 , 21)}...
                        <div class="delete"></div>
                    </li>
                    `;
                    console.log('Больше 21-го символа!');
                });
            };
        }
    )}

Answer 1

Это, конечно, не ваш код, т.к. воспроизвести каждую переменную это долго :) Но суть в том чтобы просто с самого начала сохранить в отдельной переменной значение value.length >= 21. Ниже я привёл пример который это наглядно показывает как надо было сделать, если уловите суть то легко сможете переделать свою функцию:

const input = document.querySelector('#input');
const output = document.querySelector('#output');
const maxLength = 21;

input.oninput = (e) => {
  const value = e.target.value;
  const isBigText = value.length >= maxLength;
  
  output.innerHTML = value.slice(0, maxLength) + `${isBigText ? '...' : ''}`;
}

<label for="input">Input text</label>
<input type="text" id="input">
<p id="output"></p>

БЛОГ НА HUSL

Как можно написать короче и лаконичнее? Метод объекта

Ответы (1 шт):