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

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>