Ошибка undefined

Question

Ошибка - Cannot read property 'title' of undefined

const mainBlock = document.querySelector('.main-block');
const mainBlockTitle = document.querySelector('.main-block__input-title');
const mainBlockDescription = document.querySelector('.main-block__description');
const mainBlockBtn = document.querySelector('.main-block__btn');
const mainBlockDo = document.querySelector('.main-block__do');
const mainBlockDeleteDo = document.querySelector('.main-block__delete-do');
const mainBlockDoList = document.querySelector('.main-block__do-list');

const doList = [];

const renderElements = doing => {
    const liItems = document.createElement('li');
    liItems.classList.add('main-block__do');
    liItems.innerHTML = `<div class="main-block__text-do">${doing.title}</div>
        <p class="main-block__description-do">${doing.description}</p>
        <button class="main-block__delete-do">Удалить</button>
    `;
    mainBlockDoList.append(liItems);
};

renderElements();

const init = () => {
    mainBlockDoList.textContent = '';

    for(let i = 0; i < doList.length; i++) {
        renderElements(doList[i]);
    }
};

mainBlockBtn.addEventListener('click', event => {
    const mainBlockTitleValue = mainBlockTitle.value;
    const mainBlockDescriptionValue = mainBlockDescription.value;

    mainBlockDescription.style.borderColor = '';
    mainBlockTitle.style.borderColor = '';

    if (mainBlockTitleValue !== '' || mainBlockDescriptionValue !== '') {
        const doing = {
            description: mainBlockDescriptionValue,
            title: mainBlockTitleValue
        };

        doList.push(doing);

        init();

    } else {
        if (!mainBlockDescriptionValue) mainBlockDescription.style.borderColor = 'red';
        if (!mainBlockTitleValue) mainBlockTitle.style.borderColor = 'red';
    }

    mainBlockDescription.value = '';
    mainBlockTitle.value = '';
});

init();

Answer 1

renderElements();

Если функция определена с параметром, и параметр в ней используется, то желательно что-нибудь туда передать.

Но в Вашем случае можно просто закомментировать эту строчку:

// renderElements();

Answer 2

renderElements описана как функция с одним параметром

const renderElements = doing => {

А вызывается без параметров

renderElements();

Следовательно значение doing в этом случае undefined и при попытке обратиться к его свойствам будет указанная ошибка.

Answer 3

Когда арров функции создаешь, ИМХО нужно скобочки ставить, чтобы аргументы были на глазу, +всегда можно в лёгкую дописать и 2 и третий аргумент

И можешь запиховать false, что-то типа:

const renderElements=(doing=false)=>{
    if(!doing)return false;
    // code
};

Почему у тебя renderElements(); вызывается до init() и как раз без аргументов (что и вызывает ошибку)

Кста, инит можно так реализовать (в самом внизу)

(async()=>{
    console.log('init');
})();

БЛОГ НА HUSL

Ошибка undefined

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