キャッチされない例外TypeErrorボタンから関数を呼び出すときに

ロジャー王：

私は人々のグループからの記録データにフォームを作成し、例外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

blex：

あなたの関数の名前とボタンのIDは同じです。IEはこの動作を導入して以来、いくつかのブラウザはにDOM要素IDを追加しますwindowスコープ、あなたのケースで競合を引き起こしています、。

この問題へのボタンのIDを変更することによって解決することができるaddPersonBtn、例えば、。

しかし、私はHTMLとJSとを混合していないお勧めします。代わりに、削除ができonclick、あなたのHTML内の属性を、そしてそのようなあなたのJSを書きます：

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

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

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