Reputation: 23

Textarea does not want to clear (when button clicked)

I have just started out on learning JavaScript and HTML, and I am currently working on a pizza delivery program for a project. After the person gives an order (entering it into a form and clicking the order button) it is output into a text area.

If someone orders something else(click the order button again) the text area should be cleared, yet it does not clear. I have tried numerous things I found on SO and W3Schools, and yet it does not want to clear the text area.

Code to empty textarea:(Almost at the top lines within the orderPizzas function) The textarea is at the bottom of my code within the <body> with ID: Details

document.getElementById("Details").value = "";

Here is my code:

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>

I am very new to JavaScript and HTML, all advice will be well-received. Thanks in advance.

Upvotes: 0

Answers (3)

porcelain

Reputation: 69

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 should be initialized every time the function is called.

Try it!

Upvotes: 0

Aakash Patel

Reputation: 11

You are not clearing the orderDetails.

orderDetails="";

in start of function "orderPizzas" use above code.

Upvotes: 0

Vj-

Reputation: 722

It appears that the problem is because you have defined orderDetails outside your method. You need to clear the variable everytime or scope it locally, or you just keep appending to it.

Just move the variable declaration from global scope into the method definition and it ought to work.

Upvotes: 3

Textarea does not want to clear (when button clicked)

Answers (3)

Related Questions