Textarea不想清除（单击按钮时）
[英]Textarea does not want to clear (when button clicked)
问题描述
我刚开始学习JavaScript和HTML，目前正在为一个项目开发披萨发送程序。 该人下达命令（将其输入表单并单击命令按钮）后，将其输出到文本区域。
如果有人订购其他商品（再次单击订购按钮），则应清除文本区域，但不会清除。 我已经尝试了在SO和W3Schools上找到的许多东西，但是它并不想清除文本区域。
清空textarea的代码：（几乎位于orderPizzas函数的顶行 ） textarea在我的代码的底部，位于<body> ， ID为：Details
document.getElementById("Details").value = "";
这是我的代码：
var pizzaCount = 0; var gourmetPrice = 15.50; var standardPrice = 9.50; var deliveryCharge = 5; var TotalPrice; var name; var adress; var phoneNumber = 10; var gourmetCount = 0; var standardCount = 0; var orderDetails = ''; function orderPizzas() { var customerDetails; var i = 0; var j = 0; TotalPrice = 0; phoneNumber = ''; document.getElementById("Details").value = ""; var arrStandardPizza = new Array() arrStandardPizza[0] = new Array(); arrStandardPizza[0]['name'] = 'Hawaiian'; arrStandardPizza[0]['amount'] = Number(document.standard.Hawaiian.value); arrStandardPizza[1] = new Array(); arrStandardPizza[1]['name'] = 'Cheese'; arrStandardPizza[1]['amount'] = Number(document.standard.Cheese.value); arrStandardPizza[2] = new Array(); arrStandardPizza[2]['name'] = 'Veggie'; arrStandardPizza[2]['amount'] = Number(document.standard.Veggie.value); arrStandardPizza[3] = new Array(); arrStandardPizza[3]['name'] = 'Supreme'; arrStandardPizza[3]['amount'] = Number(document.standard.Supreme.value); arrStandardPizza[4] = new Array(); arrStandardPizza[4]['name'] = 'Pepperoni'; arrStandardPizza[4]['amount'] = Number(document.standard.Pepperoni.value); var arrGourmetPizza = new Array() arrGourmetPizza[0] = new Array(); arrGourmetPizza[0]['name'] = 'Meatlovers'; arrGourmetPizza[0]['amount'] = Number(document.gourmet.Meatlovers.value); arrGourmetPizza[1] = new Array(); arrGourmetPizza[1]['name'] = 'Chicken'; arrGourmetPizza[1]['amount'] = Number(document.gourmet.Chicken.value); arrGourmetPizza[2] = new Array(); arrGourmetPizza[2]['name'] = 'Prawn'; arrGourmetPizza[2]['amount'] = Number(document.gourmet.Prawn.value); standardCount = arrStandardPizza[0]['amount'] + arrStandardPizza[1]['amount'] + arrStandardPizza[2]['amount'] + arrStandardPizza[3]['amount'] + arrStandardPizza[4]['amount']; gourmetCount = arrGourmetPizza[0]['amount'] + arrGourmetPizza[1]['amount'] + arrGourmetPizza[2]['amount']; pizzaCount = standardCount + gourmetCount; if (pizzaCount > 12) { alert('A maximum of 12 pizzas can be ordered.\\nPlease modify your order.\\nPizzas ordered: ' + pizzaCount); } else { while (i < 5) { if (arrStandardPizza[i]['amount'] > 0) { orderDetails = orderDetails + '\\n' + arrStandardPizza[i]['name'] + ': ' + arrStandardPizza[i]['amount']; } i++; } while (j < 3) { if (arrGourmetPizza[j]['amount'] > 0) { orderDetails = orderDetails + '\\n' + arrGourmetPizza[j]['name'] + ': ' + arrGourmetPizza[j]['amount']; } j++; } if (document.getOrderMethod.method.value == 'Delivery') { name = prompt('What is your name?'); adress = prompt('What is your adress?'); while (phoneNumber.toString().length !== 10) { phoneNumber = prompt('What is your phone number?'); } customerDetails = '\\nDelivery:\\n' + 'Name: ' + name + ' ' + '\\n' + 'Adress: ' + adress + '\\n' + 'Phone Number: ' + phoneNumber; TotalPrice = deliveryCharge; } else { name = prompt('What is your name?'); customerDetails = '\\nPick-up:\\n' + 'Customer Name: ' + name; } TotalPrice = TotalPrice + (standardCount * standardPrice) + (gourmetCount * gourmetPrice); orderDetails = orderDetails + customerDetails + '\\n' + 'Total Cost: $' + TotalPrice; document.getElementById("Details").value = orderDetails; } }
<!DOCTYPE html> <html> <head> <title> Pete's Pizza </title> </head> <body> <h1> Welcome to Pete's Pizzas, where the best pizzas are! </h1> <h3> Enter your pizza order: </h3> <label> Amount for each standard pizza </label> <form name="standard"> <input type="text" name="Hawaiian"> Hawaiian Pizza <br> <input type="text" name="Cheese"> Cheese Pizza <br> <input type="text" name="Veggie"> Veggie Pizza <br> <input type="text" name="Supreme"> Supreme Pizza <br> <input type="text" name="Pepperoni"> Pepperoni Pizza <br> </form> <label> Amount for each gourmet pizza </label> <form name="gourmet"> <input type="text" name="Meatlovers"> Meat-lovers Pizza <br> <input type="text" name="Chicken"> Chicken Pizza <br> <input type="text" name="Prawn"> Prawn <br> </form> <form name="getOrderMethod"> <input type="radio" name="method" value="Delivery" checked> Delivery <br> <input type="radio" name="method" value="Pick-up"> Pick-up <br> </form> <input type="button" value="Confirm Order" onClick="orderPizzas()"> <input type="button" value="Cancel Order" onClick="window.location.reload()"> <textarea id="Details" value="" rows="9" cols="33" wrap=on readonly></textarea> </body> </html>
我对JavaScript和HTML非常陌生，所有建议都将广为接受。 提前致谢。
3 个解决方案
解决方案1
3 2017-10-18 02:04:30
看来问题出在，是因为您在方法之外定义了orderDetails 。 您需要每次都清除该变量，或者在本地对其进行范围限定，或者只是继续附加它。
只需将变量声明从全局范围移到方法定义中，它就应该起作用。
解决方案2
0 2017-10-18 02:03:45
var pizzaCount = 0; var gourmetPrice = 15.50; var standardPrice = 9.50; var deliveryCharge = 5; var TotalPrice; var name; var adress; var phoneNumber = 10; var gourmetCount = 0; var standardCount = 0; function orderPizzas() { var customerDetails; var orderDetails = ''; var i = 0; var j = 0; TotalPrice = 0; phoneNumber = ''; document.getElementById("Details").value = ""; var arrStandardPizza = new Array() arrStandardPizza[0] = new Array(); arrStandardPizza[0]['name'] = 'Hawaiian'; arrStandardPizza[0]['amount'] = Number(document.standard.Hawaiian.value); arrStandardPizza[1] = new Array(); arrStandardPizza[1]['name'] = 'Cheese'; arrStandardPizza[1]['amount'] = Number(document.standard.Cheese.value); arrStandardPizza[2] = new Array(); arrStandardPizza[2]['name'] = 'Veggie'; arrStandardPizza[2]['amount'] = Number(document.standard.Veggie.value); arrStandardPizza[3] = new Array(); arrStandardPizza[3]['name'] = 'Supreme'; arrStandardPizza[3]['amount'] = Number(document.standard.Supreme.value); arrStandardPizza[4] = new Array(); arrStandardPizza[4]['name'] = 'Pepperoni'; arrStandardPizza[4]['amount'] = Number(document.standard.Pepperoni.value); var arrGourmetPizza = new Array() arrGourmetPizza[0] = new Array(); arrGourmetPizza[0]['name'] = 'Meatlovers'; arrGourmetPizza[0]['amount'] = Number(document.gourmet.Meatlovers.value); arrGourmetPizza[1] = new Array(); arrGourmetPizza[1]['name'] = 'Chicken'; arrGourmetPizza[1]['amount'] = Number(document.gourmet.Chicken.value); arrGourmetPizza[2] = new Array(); arrGourmetPizza[2]['name'] = 'Prawn'; arrGourmetPizza[2]['amount'] = Number(document.gourmet.Prawn.value); standardCount = arrStandardPizza[0]['amount'] + arrStandardPizza[1]['amount'] + arrStandardPizza[2]['amount'] + arrStandardPizza[3]['amount'] + arrStandardPizza[4]['amount']; gourmetCount = arrGourmetPizza[0]['amount'] + arrGourmetPizza[1]['amount'] + arrGourmetPizza[2]['amount']; pizzaCount = standardCount + gourmetCount; if (pizzaCount > 12) { alert('A maximum of 12 pizzas can be ordered.\\nPlease modify your order.\\nPizzas ordered: ' + pizzaCount); } else { while(i < 5) { if ( arrStandardPizza[i]['amount'] > 0) { orderDetails = orderDetails + '\\n' + arrStandardPizza[i]['name'] + ': ' + arrStandardPizza[i]['amount']; } i++; } while(j < 3) { if ( arrGourmetPizza[j]['amount'] > 0) { orderDetails = orderDetails + '\\n' + arrGourmetPizza[j]['name'] + ': ' + arrGourmetPizza[j]['amount']; } j++; } if (document.getOrderMethod.method.value == 'Delivery') { name = prompt('What is your name?'); adress = prompt('What is your adress?'); while( phoneNumber.toString().length !== 10) { phoneNumber = prompt('What is your phone number?'); } customerDetails = '\\nDelivery:\\n' + 'Name: ' + name + ' ' + '\\n' + 'Adress: ' + adress + '\\n' + 'Phone Number: ' + phoneNumber; TotalPrice = deliveryCharge; } else { name = prompt('What is your name?'); customerDetails = '\\nPick-up:\\n' + 'Customer Name: ' + name; } TotalPrice = TotalPrice + (standardCount * standardPrice) + (gourmetCount * gourmetPrice); orderDetails = orderDetails + customerDetails + '\\n' + 'Total Cost: $' + TotalPrice; document.getElementById("Details").value = orderDetails; } }
<h1> Welcome to Pete's Pizzas, where the best pizzas are! </h1> <h3> Enter your pizza order: </h3> <label> Amount for each standard pizza </label> <form name ="standard"> <input type="text" name="Hawaiian" > Hawaiian Pizza <br> <input type="text" name="Cheese" > Cheese Pizza <br> <input type="text" name="Veggie" > Veggie Pizza <br> <input type="text" name="Supreme" > Supreme Pizza <br> <input type="text" name="Pepperoni" > Pepperoni Pizza <br> </form> <label> Amount for each gourmet pizza </label> <form name ="gourmet"> <input type="text" name="Meatlovers" > Meat-lovers Pizza <br> <input type="text" name="Chicken" > Chicken Pizza <br> <input type="text" name="Prawn" > Prawn <br> </form> <form name="getOrderMethod"> <input type="radio" name="method" value="Delivery" checked> Delivery <br> <input type="radio" name="method" value="Pick-up"> Pick-up <br> </form> <input type="button" value="Confirm Order" onClick="orderPizzas()" > <input type="button" value="Cancel Order" onClick="window.location.reload()" > <textarea id="Details" value="" rows="9" cols="33" wrap=on readonly> </textarea>
每次调用该函数时，都应初始化CustomerDetails。
试试吧！
解决方案3
0 2017-10-18 02:06:06
您没有清除orderDetails。
orderDetails="";
在函数“ orderPizzas”的开头使用上面的代码。
单击发送按钮时如何将“给定文本”附加到文本区域。？
[英]How to append “given text” with a textarea when send button is clicked.?
显示/隐藏带有验证的文本区域。显示时单击单选按钮
[英]show/hide textarea with validation.when displayed clicked on radio button
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.