点击Add User按钮新增重复表格行的问题求助与解决

问题根源 #

你的代码里给按钮绑定了两次collect点击事件：

• 按钮HTML标签里通过onclick="collect()"直接绑定
• JavaScript代码里又通过submitBtn.addEventListener("click",collect);再次绑定

点击按钮时，两个事件会同时触发，导致collect函数执行两次，插入两行重复数据。

修复方案（二选一即可） #

方案1：移除HTML标签中的onclick属性

把按钮代码改成：

<button id="submitBtn">Add User</button>

保留JavaScript里的事件监听逻辑，这样每次点击只会触发一次函数。

方案2：移除JavaScript中的事件监听代码

删除这一行：

submitBtn.addEventListener("click",collect);

只保留HTML按钮上的onclick绑定，同样能避免重复触发。

修改后的完整代码示例（以方案1为例） #

<button id="submitBtn">Add User</button>
<hr>
<p align="center">By registering an account you agree to our <a href="#"><u>terms & privacy</u></a>.</p>
<hr>
<table align="center" id="display">
    <caption><b>Registered Users</b></caption>
    <tr>
        <th>Student ID</th>
        <th>First Name</th>
        <th>Middle Name</th>
        <th>Last Name</th>
        <th>Address</th>
        <th>Birthday</th>
        <th>Contact Information</th>
    </tr>
</table><br>
<script type="text/javascript">
var submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click",collect);
var row = 1;
function collect() {
    var studid= document.getElementById("studid").value;
    var fname= document.getElementById("fname").value;
    var mname= document.getElementById("mname").value;
    var lname= document.getElementById("lname").value;
    var address= document.getElementById("address").value;
    var bday= document.getElementById("bday").value;
    var email= document.getElementById("email").value;

    if(!studid || !fname || !mname || !lname || !address || !bday || !email) {
        alert("Fill all the boxes");
        return;
    }

    var display= document.getElementById("display");
    var newRow= display.insertRow(row);

    var cell1=newRow.insertCell(0);
    var cell2=newRow.insertCell(1);
    var cell3=newRow.insertCell(2);
    var cell4=newRow.insertCell(3);
    var cell5=newRow.insertCell(4);
    var cell6=newRow.insertCell(5);
    var cell7=newRow.insertCell(6);

    cell1.innerText = studid;
    cell2.innerText = fname;
    cell3.innerText = mname;
    cell4.innerText = lname;
    cell5.innerText = address;
    cell6.innerText = bday;
    cell7.innerText = email;

    row++;
}
</script>

内容的提问来源于stack exchange，提问作者wanshuu