Node.appendChild: аргумент 1 не реализует интерфейс Node в чистом JS

Я пытаюсь создать форму со списком. Кнопка отвечает за добавление нового элемента в список на форме. HTML:

<form id="newBrand">
        <fieldset>
            <ul id="formCars">
              <li>
                <legend>Car 1</legend>
                <label>Name
                    <input type="text" name="carName1" />
                </label>
              </li>
            </ul>
        </fieldset>
        <button type="button" id="addCar">+</button>
</form>

И вот мой JS-код:

        const form = document.getElementById('newBrand');
        const formCars = document.getElementById('formCars');  
        const addCarBtn = document.getElementById('addCar');
        addCarBtn.addEventListener('click', () => formCars.appendChild(createBrandCar));

        function createBrandCar() {
            const result = document.createElement('li');
            let size = formCars.getElementsByTagName('li').length;
            result.innerHTML = `
                <legend>Car ${size}</legend>
                <label>Name
                    <input type="text" name="carName${size}" />
                </label>`;
            return result
        }

Мое приложение отображается нормально, но когда я нажимаю кнопку, я получаю эту ошибку:

Uncaught TypeError: Node.appendChild: Argument 1 does not implement interface Node.

Эта ошибка указывает на строку, содержащую этот код:

addCarBtn.addEventListener('click', () => formCars.appendChild(createBrandCar));

Что я могу сделать, чтобы предотвратить появление этой ошибки?


javascript appendchild
person Monoxyd    schedule 22.05.2021    source источник
comment
Что произойдет, если вы на самом деле вызовете функцию createBrandCar? formCars.appendChild(createBrandCar())?   -  person Andy    schedule 22.05.2021
comment
Затем он работает, как ожидалось   -  person Monoxyd    schedule 22.05.2021

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны вызвать функцию, указав круглые скобки после имени функции:

addCarBtn.addEventListener('click', () => formCars.appendChild(createBrandCar()));

Кроме того, поскольку у вас уже есть один элемент списка при загрузке страницы, вы должны увеличить размер на 1:

let size = ++formCars.getElementsByTagName('li').length;

Демонстрация:

const form = document.getElementById('newBrand');
const formCars = document.getElementById('formCars');  
const addCarBtn = document.getElementById('addCar');
addCarBtn.addEventListener('click', () => formCars.appendChild(createBrandCar()));

function createBrandCar() {
    const result = document.createElement('li');
    let size = ++formCars.getElementsByTagName('li').length;
    result.innerHTML = `
        <legend>Car ${size}</legend>
        <label>Name
            <input type="text" name="carName${size}" />
        </label>`;
    return result
}
<form id="newBrand">
    <fieldset>
        <ul id="formCars">
          <li>
            <legend>Car 1</legend>
            <label>Name
                <input type="text" name="carName1" />
            </label>
          </li>
        </ul>
    </fieldset>
    <button type="button" id="addCar">+</button>
</form>

person Mamun    schedule 22.05.2021