2016-05-03 2 views
0

mein Javascript für Namensschilder jeder Buchstabe eine Schätzung gibt $ 10erhalten von den Textbereich zu befreien, sobald auf einem Formular geklickt

Sehr neu zu Javascript, ich versuche, auf meine Eingabe des Textbereichs, um loszuwerden/Nach dem Klicken auf die Schaltfläche "Senden /" wird angezeigt. . . . Sagen wir einfach, wenn ich eine Eingabe erneut eingeben möchte, sollte sie die letzte Eingabe löschen und einen neuen Preis geben. . . jetzt häuft

zum Beispiel folgenden: Namen eingeben: Gesamtkosten Kosten $ 30Total ist $ 60Total Die Kosten werden Kosten $ 60Total wird 110Total $ $ 90Total Kosten Kosten mein Javascript $ 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 ist;

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

Suchen Sie den Eingabebereich zu leeren? –

+0

Ja, Sie können sehen, was ich meine hier mehrere Namen eingeben http://output.jsbin.com/gikomukaro –

+0

@velimir hat es funktioniert ... –

Antwort

4

Sie sind mit += die neuen Daten an Ihrem Element anhängen, möchten Sie die ganze innerHTML- ersetzen, verwenden Sie so nur die = Betreiber.

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

wird

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

Vielen Dank Für die Informationen schauen Sie sich bitte diesen Link an, hoffentlich können Sie mir besser helfen. . . Geben Sie mehrere Namen ein http://output.jsbin.com/gikomukaro –

+0

@MarkeseP Haben Sie die vorgeschlagene Änderung versucht? Es funktioniert gut, nachdem Sie die vorgeschlagene Änderung verwendet haben. – jitendragarg

+0

Danke Ich sehe, was du sagst, ja, ich habe es an den "Namen eingeben:" angefügt, anstatt ein ganz neues Element zu erstellen, also nehme ich an, dass es sehr schlechte Praxis ist –

0

Bitte fügen Sie unter Skript:

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

Dadurch wird das Problem behoben, dass Texteingabe gelöscht wird, wenn Sie versuchen, einen neuen Wert hinzuzufügen. – Ronak

Verwandte Themen