个人中心
gpt4 book ai didi

javascript - 文本区域不想清除(单击按钮时)

转载 作者：行者123 更新时间：2023-11-28 17:45:39 25 4
gpt4 key购买 nike

我刚刚开始学习 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/

25 4 0
文章推荐： iphone - iOS - UIWebview - 滚动并按住停止 JavaScript
文章推荐： JavaScript var = int ||整数？
文章推荐： html - 如何水平居中 Twitter Bootstrap 网格元素
文章推荐： html - Big Cartel - Luna 2x2 产品主页
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com