时间戳

首页 > 解决方案 > 从按钮调用函数时未捕获的 TypeError

javascript - 从按钮调用函数时未捕获的 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

标签： javascripthtmlformsbuttontypeerror

解决方案

您的函数名称和按钮 ID 相同。自从 IE 引入此行为以来，一些浏览器将 DOM 元素 ID 添加到window范围，这会导致您的情况发生冲突。

例如，可以通过将按钮的 ID 更改为 来解决此问题addPersonBtn。

但是，我建议不要混合 HTML 和 JS。您可以改为删除onclickHTML 中的属性，并像这样编写 JS：

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

function addPerson(){
    console.log('It worked.');
}
<button id="addPersonBtn">Click me</button>

推荐阅读