我使用JS添加了一行，但它在几秒/毫秒后立即被删除，控制台日志也显示没有错误
Posted
技术标签:
【中文标题】我使用JS添加了一行，但它在几秒/毫秒后立即被删除，控制台日志也显示没有错误【英文标题】：I added a row using JS, but it gets immediately deleted after a few seconds/miliseconds, the console log also shows no error 【发布时间】：2022-01-11 01:06:54 【问题描述】：所以，我制作了两张表格，一张表格包含一个表格，您可以在表格中输入您想要的任何内容，然后它会显示在另一个表格中。
<table>
<head>
<tr>
<th>Product Name</th>
<th>Product Price</th>
<th>Product Quantity</th>
<th>Product Barcode</th>
</tr>
</thead>
<tbody>
<tr>
<form id="input">
<td><input class="userinput" id="productname" type="text" placeholder="Product Name"></td>
<td><input class="userinput" id="productprice" type="text" placeholder="Product Price"></td>
<td><input class="userinput" id="productquantity" type="number" placeholder="Product Quantity"></td>
<td><input class="userinput" id="productcode" type="number" placeholder="Product Barcode"></td>
<td><button>Add Products</button></td>
</form>
</tr>
</tbody>
</table>
用户将在此表中输入数据，数据将显示在表 2 中，即：
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Product Price</th>
<th>Product Quantity</th>
<th>Product Barcode</th>
</tr>
</thead>
<tbody id="plist">
<tr>
<td> product name 1</td>
<td>product price 1</td>
<td>product quantity 1</td>
<td>product bardcode 1</td>
</tr>
</tbody>
</table>
这里使用的JS代码是：
<script>
const formel = document.querySelector('#input');
const tableel=document.querySelector('#plist');
function addRow(e)
e.preventDefault;
const pname = document.getElementById('productname').value;
const pprice = document.getElementById('productprice').value;
const pquan = document.getElementById('productquantity').value;
const pcode = document.getElementById('productcode').value;
tableel.innerhtml+= `
<tr>
<td>$pname</td>
<td>$pprice</td>
<td>$pquan</td>
<td>$pcode</td>
</tr>
`;
formel.addEventListener("submit", addRow)
</script>
该项目被添加几秒钟/数百万，立即被删除。我尝试检查控制台，它没有显示错误。
我是javascript新手，老实说，我通过观看各种YouTube视频获得了js代码，但我不明白为什么表格行添加后会立即被删除。
如果有人提供帮助，那真的很有帮助，提前谢谢你。
【问题讨论】：
【参考方案1】：由于 preventDefault 是一个方法，所以需要将 e.preventDefault 改为 e.preventDefault();。
参考：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
【讨论】：
【参考方案2】：由于你没有调用 e.preventDefault，点击 Add Products 按钮发出请求并将表单的数据发送到服务器，然后它显示这个请求的响应（什么都没有）作为结果几毫秒后，您可以看到一个空白页面。要解决此问题，您需要将 e.preventDefault 更改为 e.preventDefault() 并且此更改会阻止提交表单。
【讨论】：
非常感谢，这么小的事情感觉就像一个愚蠢的问题。感谢您的帮助。我忽略了括号。以上是关于我使用JS添加了一行，但它在几秒/毫秒后立即被删除，控制台日志也显示没有错误的主要内容，如果未能解决你的问题，请参考以下文章