2017-10-18 118 views
0

我剛剛開始學習JavaScript和HTML,目前我正在爲一個項目開發比薩交付程序。在該人員下達命令(將其輸入到表單並單擊命令按鈕)之後,它會輸出到文本區域中。Textarea不想清除(點擊按鈕時)

如果有人訂購了其他東西(再次點擊訂單按鈕),文本區域應該被清除,但它不會清除。我嘗試了很多我在SO和W3School上發現的東西,但它不想清除文本區域。

代碼以空textarea的:(幾乎在內的頂部線orderPizzas起作用)的textarea的處於底部的我的代碼<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,所有的建議將大受歡迎。提前致謝。

+0

你試圖用來清除textarea的代碼在哪裏?我們無法幫助您解決我們看不到的問題!此外,它會幫助您創建一個[最小,完整和可驗證的示例](https://stackoverflow.com/help/mcve),並在[可運行的代碼片段]中使用* relevalt *代碼(https:/ /stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) – FluffyKitten

+0

您已突出顯示清除textarea的行。現在看看其他行設置textarea的值並仔細檢查這些值。順便說一句,不斷地拒絕用戶的電話號碼,而不告訴他們你期望的格式是非常煩人的。 – nnnnnn

+0

我已注意到您的意見@nnnnnn,並感謝您的幫助和建議! – Stefan

回答

0

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應在每次函數調用時初始化。

試試吧!

+2

這有什麼不同?我們是否應該一行一行地與OP的代碼進行比較,以查看您所做的更改?請[編輯]你的回答,以解釋問題是什麼以及你如何修復它。 – nnnnnn

+0

this line:'orderDetails = customerDetails +'\ n'+'Total Cost:$'+ TotalPrice;' –

+0

再次,您的答案在答案中明確表達,而不僅僅是在評論中。但是,改變*那條線意味着比薩餅的細節不被輸出,所以這不是OP想要的。 – nnnnnn

2

看來問題在於你在方法外定義了orderDetails。您需要每次清除變量或將其範圍在本地範圍內,或者您只需附加到該變量。

只需將全局範圍的變量聲明移動到方法定義中即可。

+0

非常感謝你,先生,它的作品!你是個天才! – Stefan

+0

很高興幫助,如果它的工作,請不要忘記標記答案爲接受。 –

+0

如何將其標記爲已接受? – Stefan

0

您不清除orderDetails。

orderDetails=""; 

功能啓動「orderPizzas」使用上面的代碼。

+0

我編輯了我的問題,我嘗試'初始化'textarea的值,否則輸出將是正確的,同時在輸出頂部還有'undefined'。 – Stefan