Почему не срабатывает код в обработчике onclick?

Question

[suprascapularis69]

<form class="form" novalidate>
                <div class="form-field">
                    <label for="name" class="form-label"><span>Наименование товара</span></label>
                    <input type="text" name="Product name" placeholder="Введите наименование товара" id="name" class="form-input required input-name">
                </div>
                <div class="form-field form-field-big">
                    <label for="description" class="form-label">Описание товара</label>
                    <textarea name="Product description" placeholder="Введите описание товара" id="description" class="form-input big-input input-description"></textarea>
                </div>
                <div class="form-field">
                    <label for="image" class="form-label"><span>Ссылка на изображение товара</span></label>
                    <input type="url" name="Product image link" placeholder="Введите ссылку" id="image" class="form-input required input-image">
                </div>
                <div class="form-field form-field-last">
                    <label for="price" class="form-label"><span>Цена товара</span></label>
                    <input type="number" name="Product price" placeholder="Введите цену" id="price" class="form-input required input-price">
                </div>
                <button class="form-button" type="submit">Добавить товар</button>
            </form>

let form = document.querySelector('.form'),
    formRequired = document.querySelectorAll('.required'),
    formButton = document.querySelector('.form-button'),
    inputName = document.querySelector('.input-name'),
    inputDescription = document.querySelector('.input-description'),
    inputImage = document.querySelector('.input-image'),
    inputPrice = document.querySelector('.input-price'),
    productList = document.querySelector('.product-list');



formButton.disabled = true;

form.onkeyup = function () {

    if (inputName.value !== '' && inputImage.value !== '' && inputPrice.value !== '') {
        formButton.style.background = '#7BAE73';
        formButton.style.color = '#FFFFFF';
        formButton.disabled = false;
    } else {
        formButton.style.background = '#EEEEEE';
        formButton.style.color = '#B4B4B4';
        formButton.disabled = true;
    }

    if (document.querySelector('.form-error')) {
        for (let x of document.querySelectorAll('.form-error')) {
            x.remove();
        }
    }

    formRequired.forEach(function (input) {
        if (input.value === '') {
            input.classList.add('error');
            var error = document.createElement('p');
            error.innerHTML = 'Поле является обязательным';
            error.classList.add('form-error');
            input.after(error);
        } else {
            input.classList.remove('error');
        }
    })

    return false;

}

formButton.onclick = function (event) {

    if (inputName.value !== '' && inputImage.value !== '' && inputPrice.value !== '') {

        var productCard = document.createElement('div');
        productCard.classList.add('product-card');
        productList.appendChild(productCard);

        var li = document.createElement('li');
        productCard.appendChild(li);

        var productCardPhotoWrapper = document.createElement('div');
        productCardPhotoWrapper.classList.add('product-card-photo-wrapper');
        li.appendChild(productCardPhotoWrapper);

        var img = document.createElement('img');
        productCardPhotoWrapper.appendChild(img);
        img.src = inputImage.value;
        img.style.width = "332px";
        img.style.height = "200px";

        var productCardProperty = document.createElement('div');
        li.appendChild(productCardProperty);
        productCardProperty.classList.add('product-card-property');

        var productName = document.createElement('p');
        productCardProperty.appendChild(productName);
        productName.classList.add('product-name');
        productName.innerHTML = inputName.value;

        var productDescription = document.createElement('p');
        productCardProperty.appendChild(productDescription);
        productDescription.classList.add('product-description');
        productDescription.innerHTML = inputDescription.value;
        
        var productPrice = document.createElement('p');
        productCardProperty.appendChild(productPrice);
        productPrice.classList.add('product-price');
        productPrice.innerHTML = inputPrice.value + ' руб.';

        inputName.value = '';
        inputDescription.value = '';
        inputImage.value = '';
        inputPrice.value = '';
        formButton.style.background = '#EEEEEE';
        formButton.style.color = '#B4B4B4';
    }


    return;

}

Comments

[Александр]

что значит, что не срабатывает? в консоли выдает ошибку? если да, то сюда текст ошибки. Слишком много кода нужно прочитать, чтобы понять, что происходит. С текстом ошибки можно понять быстрее. Или поняснить, какая часть кода не срабатывает, в каком обработчике. Бал ли смысл постить прямо весь код или только ты его часть, где возникает ошибка?

также можно было разместить страничку на каком-то хостинге или например в codepen, чтобы можно было попробовать и воспроизвести ошибку. Со вторым вариантом можно даже сращу и поправить код

[Александр]

Ошибка указывает на строку productList.appendChild(productCard); и говорит, что переменная productList равна null. и поэтому в ненельзя ничего зааппендить

[Beliyadm]

Добавьте элемент .product-list в хтмл (вы же его объявляете в переменную в начале) и в конце JS сделать return false, чтобы форма никуда не отрабатывала штатно по клику
https://jsfiddle.net/beliyadm/mwcfnods/12/