![](/img/trans.png)
[英]Why does my JS onscroll function dont work when I write the JS code in my JS file?
[英]Why does not work clearForm() in my code in JS?
该程序采用名称、价格、类别等值,之后表格应该清晰但不起作用
function addProduct()
{
var product =
{
name:productNameInput.value,
price:productPriceInput.value,
category:productCategoryInput.value,
desc:productDescriptionInput.value
}
productsContainer.push(product);
localStorage.setItem("Products",JSON.stringify(productsContainer));
displayProducts();
clearForm();
}
<div class="container py-5">
<label>Product Name:</label>
<input type="text" name=" " id="productNameInput" class="my-2 form-control">
<label>Product Price:</label>
<input type="number" name=" " id="productPriceInput" class="my-2 form-control">
<label>Product Category:</label>
<input type="text" name=" " id="productCategoryInput" class="my-2 form-control">
<label>Product Description:</label>
<textarea name=" " id="productDescriptionInput" class="my-2 form-control">
</textarea>
<button id ="addBtn"class="btn btn-info">Add Product</button>
</div>
您需要包装 HTML 以形成标签<form id="myform">
并添加 button type="button
<button type="button" onclick="addProduct()"
,
您的 clearForm 应该只调用 reset() function 作为
function clearForm(){
document.getElementById("myform").reset();
}
var productsContainer = []; function addProduct() { var product = { name:productNameInput.value, price:productPriceInput.value, category:productCategoryInput.value, desc:productDescriptionInput.value } productsContainer.push(product); //localStorage.setItem("Products",JSON.stringify(productsContainer)); displayProducts(); clearForm(); } function displayProducts(){ } function clearForm(){ document.getElementById("myform").reset(); }
<form id="myform"> <div class="container py-5"> <label>Product Name:</label> <input type="text" name=" " id="productNameInput" class="my-2 form-control"> <label>Product Price:</label> <input type="number" name=" " id="productPriceInput" class="my-2 form-control"> <label>Product Category:</label> <input type="text" name=" " id="productCategoryInput" class="my-2 form-control"> <label>Product Description:</label> <textarea name=" " id="productDescriptionInput" class="my-2 form-control"> </textarea> <button type="button" onclick="addProduct()" id ="addBtn"class="btn btn-info">Add Product</button> </div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.