.value return string bis ich es in Variable speichern

Question

Ich habe Fall, dass ich nicht sicher bin, wie zu erklären: Was mich Bugs ist, öffne ich den Code, schreibe ich einige Werte (Beispiel: Wie viel warst du Rechnung : 100 Wie war dein Service: 10 Wie viele Leute teilen: 2) und bevor ich auf Berechnen klicke, öffne ich die Konsole. Wenn ich schreibe:

>bill.value 
<"100" 

Ich bekomme eine Zeichenfolge, wie erwartet. Aber dann klicke ich auf Berechnen und was ich bekomme ist:

Warum 100 ?? Warum gibt es plötzlich die Nummer der Zeichenfolge zurück?

Wie kann ich Mathe damit am Ende tun. Das Einzige, was ich in eine Zahl verwandle, ist Number (bill.value). Service und Leute sollten immer noch Strings sein?

var button = document.querySelector("button"); 
 

 
var tip = document.getElementById("tip"); 
 

 
var total; 
 

 

 
button.addEventListener("click", function() { 
 

 
    var bill = document.querySelector("input"); 
 

 
    console.log(bill.value) 
 

 
    var people = document.getElementById("people").value; 
 

 
    var service = document.getElementsByTagName("select")[0].value; 
 

 
    total = (service * Number(bill.value))/people 
 
    tip.textContent = total; 
 
    console.log(total) 
 
});

<h1>Tip Calculator</h1> 
 

 
<div>How much was your bill?</div> 
 

 
<label for="bill">$</label> 
 
<input type="number" id="bill"> 
 

 

 

 
<div>How was your service?</div> 
 

 
<select> 
 
    <option disabled selected value="0">Choose</option> 
 

 
    <option value="0.30">30% - Outstanding</option> 
 
    <option value="0.20">20% - Good</option> 
 
    <option value="0.15">15% - It was okaya</option> 
 
    <option value="0.10">10% - Bad</option> 
 
    <option value="0.05">5% - Terible</option> 
 
</select> 
 

 
<div>How many people are sharing the bill?</div> 
 
<label> 
 
    <input type="number" id="people">people</label> 
 

 
<button>Calculate!</button> 
 

 
<span id="tip"></span>

Answer 1

Edit: Jetzt verstehen Sie implizite Konvertierung des fragen ich meine Antwort aktualisiert habe.

Werfen Sie einen Blick auf den folgenden Code, Sie werden feststellen, dass product einen Wert enthält, der eine Zahl ist, während Summe eine Zeichenfolge enthält. Ein Ausdruck, der zwei Strings enthält, die durch einen Operator + getrennt sind, führt immer zur Verkettung der Strings (was die meisten erwarten).

Auf der anderen Seite ist der Operator * nicht gültig für zwei Zeichenfolgen, also versucht es, die Zeichenfolgen in Werte zu konvertieren, die den Operator * unterstützen, nämlich Zahlen. Wenn beide Zeichenfolgen gültige Ganzzahlen oder Fließkommazahlen sind, ist das Ergebnis das Produkt der beiden Zahlen. Wenn nicht, wird das Ergebnis NaN sein.

var a = '2.0'; 
var b = '3.0'; 

var sum = a + b; 
var product = a * b; 

console.log(product); // 6.0 
console.log(sum); // "2.03.0"