2017-05-12 2 views
0

Ich habe ein Formular Ich versuche zu tun, wo, wenn jemand Text in ein Textfeld eines Formulars eingibt, klicken Sie dann auf Senden, ich möchte ihm die Kosten für die zeigen zeichen (zeichenzahl x preis) ich bekomme immer NaN!Javascript - Anzahl der Zeichen in einem Textfeld zurückgeben NaN

Heres meine Html:

<section class="sign" id="sign"> 
<h3 class="sign_header">CUSTOM SIGNAGE</h3> 
<p class="sign_text">Enter Name, the cost per letter is $<span id="lettercost">6</span>.</p> 
<form class="info_form"> 
    <input type="text" id="inputletters" value="Example Name"><br> 
    <input type="button" value="Submit" class="button" id="getprice" onClick="getPrice();"> 
</form> 

und hier ist mein Javascript

function getPrice(){ 
    var quantity = document.getElementById('inputletters').value.length; 
    var price = document.getElementById('lettercost'); 
    var total = quantity*price; 
    var cost = document.getElementById('cost'); 
    cost.textContent = total; 
} 
+0

Sie haben sie als ganze Zahlen zu analysieren! Außerdem ist "Preis" nicht einmal eine Zeichenfolge, die eine Zahl enthält, sondern ein Element. Wolltest du den "Wert"? – Li357

+0

"price" ist ein HTMLElement ... was erwarten Sie, dass das Ergebnis einer Multiplikation wäre ... Sie müssen 'var price = document.getElementById ('lettercost') verwenden. TextContent;' - Sie müssen es nicht analysieren Wenn Sie Multiplikation verwenden –

+0

Jarmouda X .textContent; funktionierte einwandfrei! Ich kann nicht glauben, dass es so ein winziger aber dummer Fehler war! Danke vielmals! – user1527388

Antwort

0

Hier ist ein lauffähiges Beispiel ist - price ein Objekt wurde, Sie wollen .textContent, und für jene, die dies in Zahlen analysieren zu Arbeit.

function getPrice() { 
 
    var quantity = document.getElementById('inputletters').value.length; 
 
    var price = document.getElementById('lettercost').textContent; 
 
    console.log(typeof quantity, typeof price) 
 
    var total = Number(quantity) * Number(price); 
 
    var cost = document.getElementById('cost'); 
 
    cost.textContent = total; 
 
}
<section class="sign" id="sign"> 
 
    <h3 class="sign_header">CUSTOM SIGNAGE</h3> 
 
    <p class="sign_text">Enter Name, the cost per letter is $<span id="lettercost">6</span>.</p> 
 
    <form class="info_form"> 
 
    <input type="text" id="inputletters" value="Example Name"><br> 
 
    <input type="button" value="Submit" class="button" id="getprice" onClick="getPrice();"> 
 
    </form> 
 
    <div id="cost"></div> 
 
</section>

Verwandte Themen