Uncaught TypeError при вызове функции из кнопки

Question

Я делаю форму для записи данных от группы людей, и когда нажимаю кнопку, чтобы добавить другого человека, консоль выдает ошибку TypeError, говоря, что addPerson () не является функцией.

HTML (тело):

<form method="POST">
    <h3> People </h3>
    <div class="person">
        <p>
            <label>Name</label>
            <input type="text" name="name" />
            <br/>
        </p>
        <p>
            <label>Gender</label>
            <input type="radio" name="gender" value="male" />Male
            <input type="radio" name="gender" value="female" />Female
            <br />
        </p>
        <p>
            <label>Date of Birth</label>
            <input type="date" name="dob" />
            <br/>
        </p>
    </div>
    <br/>
    <input type="button" value="Add another person" onclick="addPerson()" id="addPerson" />
</form>
<script src="client.js"></script>

Javascript:

function addPerson(){
    let personForm = document.getElementsByClassName("person")[0];
    let personFormCopy = personForm.cloneNode(true);
    let buttonNode = document.getElementById("addPerson");
    document.body.insertBefore(personFormCopy, buttonNode);

    let br150 = document.createElement("br");
    document.body.insertBefore(br150, buttonNode);

    br150.style.lineHeight="150px";
}

Ошибка:

Uncaught TypeError: addPerson is not a function at HTMLInputElement.onclick

Answer 1

Название вашей функции и идентификатор кнопки совпадают. С тех пор, как IE ввел это поведение, некоторые браузеры добавляют идентификаторы элементов DOM в window scope , что вызывает конфликты в вашем случае.

Эту проблему можно решить, изменив Идентификатор кнопки, например, addPersonBtn.

Однако я бы рекомендовал не смешивать HTML и JS. Вместо этого вы можете удалить атрибут onclick в вашем HTML и написать свой JS следующим образом:

document.getElementById('addPersonBtn').addEventListener('click', addPerson);

function addPerson(){
    console.log('It worked.');
}

<button id="addPersonBtn">Click me</button>