Textareaはクリアしたくない（ボタンをクリックしたとき）

JavaScriptとHTMLの学習を始めたばかりですが、現在はプロジェクトのピザ配信プログラムに取り組んでいます。人が注文をした後（フォームに入力して注文ボタンをクリックすると）、テキストエリアに出力されます。Textareaはクリアしたくない（ボタンをクリックしたとき）

他の人が何かを注文した場合（注文ボタンをもう一度クリックすると）、テキスト領域はクリアされますが、クリアされません。私はSOとW3Schoolで見つけた多くのことを試しましたが、テキスト領域をクリアしたくありません。空のテキストエリアに

コード：（ほとんど上部ラインに内orderPizzasは機能）TEXTAREAはIDと<body>内に自分のコードの下部にある：詳細

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に非常に新しいです、すべてのアドバイスが好評されます。前もって感謝します。

出典

2017-10-18 Stefan

テキストエリアをクリアするために使用しようとしているコードはどこですか？私たちは見ることができない問題を解決するのを手助けすることはできません！また、[実行可能コードスニペット]（* https：//stackoverflow.com/help/mcve）で* relevalt *コードのみを使用して[Minimal、Complete、Verifiable example] /stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/） – FluffyKitten

テキストエリアをクリアする行が強調表示されています。今度は、他の行がテキストエリアの値を設定し、それらの値を再確認します。ところで、あなたが期待している形式を知らせずに、ループ内でユーザーの電話番号を継続的に拒否するのはかなり面倒です。 – nnnnnn

私はあなたのコメント@nnnnnnをメモし、あなたの助けと助言に感謝します！ – Stefan

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は、関数が呼び出されるたびに初期化されなければなりません。

出典

2017-10-18 02:03:45

これについての違いは何ですか？私たちはあなたが変更したものを見るためにOPのコードと行ごとに比較することになっていますか？あなたの答えを[編集]して、問題の内容とその修正方法を説明してください。 – nnnnnn

この行： 'orderDetails = customerDetails + '\ n' + 'トータルコスト：$' + TotalPrice; –

もう一度コメントを入力するだけではなく、回答自体に答えを明記することもできます。しかし、* lineを変更することは、ピザの詳細が出力されないことを意味するので、OPが望むものではありません。 – nnnnnn

あなたのメソッド外にorderDetailsを定義しているために問題が発生しているようです。変数を毎回クリアするか、ローカルでスコープを変更するか、そのまま続ける必要があります。

変数スコープをグローバルスコープからメソッド定義に移動するだけで動作するはずです。

出典

2017-10-18 02:04:30

ありがとうございます、それは動作します！あなたは天才です！ – Stefan

助けてくれてうれしいです。もしうまくいけば、回答を受け入れたものとしてマークしてください。 –

どのように受け入れられるとマークしますか？ – Stefan

注文詳細を消去していません。

orderDetails="";

機能の "orderPizzas"で上記のコードを使用します。

出典

2017-10-18 02:06:06

私は自分の質問を編集しましたが、テキストエリアの値を初期化しようとしましたが、そうでない場合は、出力の先頭に「未定義」という出力があります。 – Stefan

Textareaはクリアしたくない（ボタンをクリックしたとき）

答えて

関連する問題