我刚刚开始学习 JavaScript 和 HTML，目前正在为一个项目开发披萨外卖程序。当该人发出订单后(将其输入表单并单击订单按钮)，该订单将输出到文本区域。
如果有人订购了其他东西(再次单击订购按钮)，文本区域应该被清除，但它并没有清除。我已经尝试了在 SO 和 W3Schools 上找到的许多东西，但它不想清除文本区域。
清空文本区域的代码:(几乎位于 orderPizzas 函数的顶行处)文本区域位于底部我的代码在<body>内带有ID:详细信息
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 非常陌生，所有建议都会受到好评。提前致谢。
最佳答案
问题似乎是因为您在方法外部定义了 orderDetails 。您需要每次都清除该变量或在本地范围内对其进行作用域，或者只是继续附加到它。
只需将变量声明从全局范围移动到方法定义中，它就应该可以工作。
关于javascript - 文本区域不想清除(单击按钮时)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46801639/