2016-05-03 8 views
0

をクリックした私のjavascriptのは、ネームプレートの推定値 に各文字を与え、フォーム上のテキスト領域を取り除くJavaScriptに$ 10は一度

非常に新しいですが、私は/私の入力にテキストエリアを取り除くためにしようとしています送信/ボタンをクリックすると表示されます。 。 。 。入力を再入力したい場合は、最後の入力をクリアして新しい価格を与える必要があるかどうかだけを言うことができます。 。 。今例えば

を積み上げている:名前を入力します:トータルコストは$ 30Totalコストで$ 60Total費用である$ 60Total費用である$ 90Total費用である$ 110Totalコストは$ 140

<body> 
<div id='container' > 
    <div id='banner'> 
      <h4 id='signName'>Name Plate Estimate</h4> 
    </div> 
      <p id="enterName">Enter Name: </p> 

    <div id='form'> 
      <form> 
       <input id="userInput" name="userInput" type="text" /> 
    <br> 
      </form> 

    </div> 
     <button id="button">Show Cost</button> 
</div> 



</body> 

HERESに私のjavascriptのです。あなたは+=であなたの要素に新しいデータを追加している

document.getElementById('button').onfocus = function(){ 

var userText = document.getElementById('userInput').value ; 


var cost = 10 ; 
var price = function(){ 

var total = userText.length * cost; 
    return total ; 
} 


if (userText.length === 0){ 

    var elError = document.getElementById('enterName') ; 
    elError.innerHTML += "Please enter a valid name" ; 
} else { 

    var elErrror = document.getElementById('enterName') ; 
    elErrror.innerHTML += 'Total Cost is $' + price() ; 



} 

} 
+0

あなたは、入力エリアを空にするために探していますか? –

+0

はい、複数の名前を入力することを意味します。http://output.jsbin.com/gikomukaro –

+0

@velimirは動作しています... –

答えて

4

、あなたは全体のinnerHTMLを置き換える、これだけ=演算子を使用します。

elErrror.innerHTML += 'Total Cost is $' + price() ; 

elErrror.innerHTML = 'Total Cost is $' + price() ; 
+0

ありがとう情報のためにこのリンクを見てみるとうまくいけば私をより良く助けることができます。 。 。複数の名前を入力してください。http://output.jsbin.com/gikomukaro –

+0

@MarkeseP変更をお試しくださいましたか?提案された変更を使用すると正常に動作します。 – jitendragarg

+0

ありがとう私は今あなたの言っていることを参照してくださいはい、私は新しい要素を作成する代わりに "Enter Name:"にそれを追加していたので、私は非常に悪い練習と仮定します –

0

なっスクリプトの下に追加してください:

document.getElementById('userInput').onfocus = function(){ 
    document.getElementById('userInput').value = '' 
}; 
+0

新しい値を追加しようとすると、テキスト入力をクリアするという問題を解決します。 – Ronak