从按钮调用函数时未捕获类型错误

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

函数的名称和按钮 ID 是相同的。自从 IE 引入此行为以来，一些浏览器将 DOM 元素 ID 添加到windowrange，这会导致您的情况发生冲突。addPersonBtn例如，可以通过将按钮的 ID 更改为 来解决此问题。不过，我建议不要混合使用 HTML 和 JS。您可以删除onclickHTML 中的属性，然后像这样编写 JS：document.getElementById('addPersonBtn').addEventListener('click', addPerson);function addPerson(){    console.log('It worked.');}<button id="addPersonBtn">Click me</button>