Javascript Tip Calculator

Arbeite ich an einem Tipp-Rechner in Javascript, wo der Benutzer sollte in der Lage sein zu geben in der Höhe der Rechnung, drücken Sie "berechnen", und sehen sowohl die Spitze und die Summe (die auch die Rechnung und das Trinkgeld).

Arbeite ich schon an dieser für eine Weile, kann aber nicht scheinen, um es richtig funktioniert.

<!DOCTYPE html>
<head>
<title>Tip Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <header>
        <h1>Tip Calculator</h1>
    </header>
    <form>
        Amount: $<input id="bill" type="text">
        <br>
        <button onclick="calc()">Calculate</button>
        <br>
        Tip: <span id="tip"></span>
        <br>
        Total: <span id="total"></span>
    </form>
</div>
<script>
    function calc() {
        var bill = document.getElementById('bill').value;
        var tip = bill * .15;
        var total = bill + tip;

        document.getElementById("tip").innerHTML= "$"+(tip).toFixed(2);
        document.getElementById("total").innerHTML= "$"+(total).toFixed(2);         
    }
</script>
</body>

Irgendwelche Vorschläge?

"kann nicht scheinen, um es richtig funktioniert" hilft nicht. Beschreiben Sie im detail Ihr problem.
Mit einem debug-tool wie Firebug für Firefox können es viel einfacher, Probleme zu identifizieren, die Sie in Ihrem javascript-code.

InformationsquelleAutor user3221658 | 2014-01-22

javascript

2

Formen werden normalerweise verwendet, zum senden von Daten an einen server aus verschiedenen Gründen. Sie haben jedoch einige Vorteile, auch wenn alles getan wird, auf der gleichen Seite (wie zum Beispiel die EINGABETASTE in der alle Eingabe-und habe es immer noch reichen ohne die Verwendung zusätzlicher code). Was ich hier Tat, war ihm eine action von der Funktion, die Sie verwenden wollte, und änderte dann Ihre Taste, um eine standard -submit.

Gibt es verschiedene Methoden für die Zeichenfolge und wenn Sie es in eine Nummer, die ich verwendet, die einfachsten hier: Number(). Ich habe es auf bill um die total_bill richtig dargestellt (anstelle der Zugabe von zwei strings zusammen, die gerade legt Sie nebeneinander). Ich änderte total zu total_bill für die variable, weil es einfach keine gute Idee zu benennen mehrere Dinge, die die gleichen (z.B. die id und die variable). Ich vermisste die bill/bill, aber ich werde es lassen, wie es ist, weil es in der Regel noch die Arbeit (wie hier).

Schließlich toFixed() nimmt eine Zahl und macht es zu einem string. Das bedeutet, Sie haben zu stellen Sie sicher, es ist eine Zahl, und nicht bereits ein string. Dies ist der Grund, warum Number() war wieder im Einsatz vor der Ausgabe.

Versuchen Sie dies:
```
<!DOCTYPE html>
<head>
<title>Tip Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <header>
        <h1>Tip Calculator</h1>
    </header>
    <form action="javascript:void(calc())">
        Amount: $<input id="bill" type="text">
        <br>
        <input type="submit" value="Calculate">
        <br>
        Tip: <span id="tip"></span>
        <br>
        Total: <span id="total"></span>
    </form>
</div>
<script>
    function calc() {
        var bill = Number(document.getElementById('bill').value);
        var tip = bill * .15;
        var total_bill = bill + tip;

        document.getElementById("tip").innerHTML= "$"+Number(tip).toFixed(2);
        document.getElementById("total").innerHTML= "$"+Number(total_bill).toFixed(2);         
    }
</script>
</body>
```
- Danke, das funktioniert perfekt! Ich Schätze Sie die Zeit nehmen, zu erklären, den geänderten code. Nochmals vielen Dank!
- Akzeptieren, was auch immer, ich habe viele rep, aber BITTE berücksichtigen Sie die best practices, die ich Ihnen zeigen und erklären, in meiner Antwort. Bitte. Ich verbrachte eine Menge Zeit für die Vorbereitung für Sie.
- ^ Kann ich nicht erklären genug. Bitte verwenden Sie keine inline-JS. Verwenden Sie ein MVC-Ansatz, und Sie werden eingestellt werden
- Ich mag, um eine person zu fixieren ist code, während als wahr an, was Sie zu original wie möglich. Sie sagen, Sie verwenden parseInt mit Basis 10 angegeben...das ist das Geld, die Hundertstel-stellen. Wutrudoin?
- Guter Punkt - habe ich aktualisiert. Was die Philosophie - die Mehrheit der code, den ich kommen sehe, aus der web-Welt ist voll mit schrecklichen Praktiken. Es ist unmöglich für mich zu sehen, ALSO Beiträge, die haben auch schlechte Praktiken, die alle über Sie, und nicht denke, es ist ein Verwandtes Problem. Ich denke, es ist daher sehr wichtig, dass wir die Verbreitung der besten Praktiken, die sich so oft und so leidenschaftlich, wie wir können. Man denke nur, wie viel Identität Diebstahl hätte verhindert werden können, wenn die Menschen sahen, eine verzweifelte bitte von prepared statements und hörte es.
- Bitte nicht ermutigen, javascript: - urls, noch inline-JS.
InformationsquelleAutor Rhyono
4

Haben Sie ein paar Probleme. Sie müssen das Ereignis übergeben, die durch die Klick-Funktion, so dass Sie halt die form von der Abgabe traditionell, die bewirkt, dass eine Aktualisierung der Seite. Die beste Vorgehensweise ist, befestigen Sie den click-handler mit javascript. Müssen Sie auch konvertieren Sie die Zeichenfolge Wert der Eingabe in eine tatsächliche Anzahl, so dass es kann verwendet werden, für die Ergänzung.

Live-demo (klicken Sie auf).
```
//get element references - no need to keep repeating this in the function
var myBtn = document.getElementById('my-button');
var tipElem = document.getElementById("tip");
var totalElem = document.getElementById("total");

//attach click event listener
myBtn.addEventListener('click', calc);

//the event object is passed to this automatically - I'm assigning it to "e"
function calc(e) {
  //prevent the default action - form submit /page refresh
  e.preventDefault();
  var input = document.getElementById('bill');
  //convert string value to Number
  var bill = parseFloat(input.value);
  var tip = bill * 0.15;
  var total = bill + tip;

  //textContent is better than innerHTML for setting text
  tipElem.textContent = "$"+(tip).toFixed(2);
  totalElem.textContent = "$"+(total).toFixed(2);  
}
```
Hier ist das markup empfehle ich:
```
<form>
  <p>Amount: $<input id="bill" type="number"></p>
  <button id="my-button">Calculate</button>
  <p>Tip: <span id="tip"></span></p>
  <p>Total: <span id="total"></span></p>
</form>
```
<br> sollte nicht verwendet werden, für das layout. Verwenden Sie stattdessen display: block auf die Elemente, die gehen sollten, um zu einer neuen Zeile. Viele Elemente machen das standardmäßig, wie eine <p>. Ich habe auch den input type auf number denn das scheint hier besser geeignet.

Leider sind einige Leute zu schlagen und argumentieren, dass inline-js (das ist jede Art von javascript in den html-Code, wie onclick) ist ok. Das ist es nicht. Ich hoffe, Sie werden Lesen einige dieser Ergebnisse: Warum ist inline-JS schlecht?
- In diesem Beispiel wird gebrochen werden, die in älteren Versionen des IE. Wenn Sie messing mit Ereignis-Listener, die Sie benötigen, zu betrachten, stackoverflow.com/questions/6927637/... (oder einfach eine lib, die macht das richtig).
- Es lohnt sich, selbst wenn "müssen die Nutzer von alten Versionen des IE (oder aktuelle Versionen) verdienen-code für Sie zu arbeiten?"
- das wichtigste ist, Folgen Sie den fachlich anerkannten standards der ersten und umzusetzen, rückwärts-kompatible Lösungen, die nicht zu missachten best practices zusammen, nur weil Sie eventuell benötigen, um sein shimmed. Mein Ziel bei der Beantwortung von Fragen ist zu fördern, eine Welt von besseren Entwicklern, nicht faul, diejenigen, die mit hoch, SO Ruf.
- Streiten für die Unterstützung im alten IE ist nur ein bisschen albern. Es führt zu weniger wartbaren code, nicht zu erwähnen, dass tatsächlich mit Kosten verbunden ist, für eine sehr kleine Anzahl von Benutzern. Dies ist eine gute Antwort.
- Ein Drittel des Planeten ist wahrscheinlich mit Windows XP, und die corporate-Welt ist auch hinter im IE-Versionen. Was muss unterstützt werden, nicht immer auf die Entwickler.
- ich persönlich finde die old-school-Methode ein bisschen mehr wartbar. Es folgt die ASP.net Modell. Es ist die gleiche Anzahl von Zeilen code, es zu tun oder so. Der Vorteil von expliziten Handler ist, können Sie überprüfen Sie das element und sehen die Veranstaltung verbindlich sofort. Wenn Sie jemals hatte, zu jagen, für einen Ereignis-listener bei einem großen Projekt, werden Sie beginnen, in Frage zu Gunsten von extreme-code-Entkopplung. Vor allem, wenn Sie nicht einmal wissen, um was/wie es angeschlossen wurde... es ist nicht Spaß. Meine $.02 🙂
InformationsquelleAutor m59
1

Versuchen, eine standard-input-Taste
```
<input type="button" onclick="calc()" value="Calculate">
```
Auch, die toFixed () - Methode nicht zwingend auf der var. In Tests in Chrome funktioniert es jedoch, wenn Sie explizit casten zu Nummer
```
    document.getElementById("tip").innerHTML= "$"+(new Number(tip)).toFixed(2);
    document.getElementById("total").innerHTML= "$"+(new Number(total)).toFixed(2);         
```
- Traurig. Upvotes für inline-javascript. Das ist schrecklich Praxis und sollte nie verwendet werden, oder empfohlen. Auch, wenn Sie möchten, eine Schaltfläche, verwenden Sie ein button.
- Schaltfläche funktioniert nicht in älteren Browsern. Inline-js ist nicht so schlimm so lange üben, bis es ist spärlich. Dies ist die gleiche Praxis verwendet ASP.net. Ansonsten, ich mag die Jagd durch Tausende Zeilen von externen javascript-Dateien einfach mal zu einer Veranstaltung verbindlich an.
- Glauben, was man will, aber "sparse" ist keine Entschuldigung. Es ist ok, es zu benutzen, um zu testen, etwas wirklich schnell - das ist es.
- Sie sollten wirklich nicht befürworten inline-JS
- -1 für die inline-JS
- Ich bin damit einverstanden, dass inlining js ist keine gute Idee. Aber die "best practice" - Beratung, das gilt auch für extreme Entkopplung ist ein wenig übertrieben. Der code in seinem Beispiel ist perfekt readible. Ich würde eher vorschlagen, mit jquery als mit Chaos-event Bindemittel ohne die lib. Aber das öffnet eine weitere Dose Würmer.
- Veranstaltung verbindlich ist ganz einfach. @m59 hat eine Antwort, die nicht schwer zu Lesen überhaupt. Und, es ist nicht overhead in der geringsten, eine gute Praxis, auch für kleinste Aufgaben
- Die einzige Sache ist natürlich, das Beispiel ist völlig kaputt in älteren Versionen von IE ... 🙂 ich verstehe nicht, eine bewährte Methode, die funktioniert nicht 100% der Zeit.
- Oh, und btw, die Tatsache, dass Sie würde für eine ganze Bibliothek von JavaScript in leu von MCV-scripting macht mir Angst
- Wenn Sie messing mit Ereignis-Listenern und wollen cross-browser-Unterstützung, die Sie brauchen, um dies zu tun, anders oder sich auf eine lib. Das Beispiel ist gebrochen, die in älteren Versionen des IE.
InformationsquelleAutor Kevin Seifert

Versuchen, diese

function calc() {
    var bill = $("#bill").value;
    var tip = bill * .15;
    var total = bill + tip;

    document.getElementById("tip").innerHTML= "$"+(tip).toFixed(2);
    document.getElementById("total").innerHTML= "$"+(total).toFixed(2);    

}

Auch versuchen zu erstellen JSFIDDLE für Sie zu erstellen, einige demo.

InformationsquelleAutor Marc

0

Das problem ist, wenn Sie document.getElementById('bill').value; es gibt string Wert, nicht die Number Wert. Um toFixed Methode, die Sie brauchen, um zu analysieren den Wert als Zahl mit Hilfe parseInt(document.getElementById('bill').value,10);

Werden Sie brauchen, um return false; zu stoppen Absenden des Formulars.

InformationsquelleAutor traditional
0
1. Ihre form eingereicht wird, daher ist es zu verlieren Werte. Es gibt viele Weg, dies zu vermeiden - ein - definieren Sie Ihre form als
  
  <form onsubmit="return false">
2. Ihre Summe nicht berechnen, weil bill gelesen wird, als string. Ein Weg, um Kraft in Zahl multipliziert mit 1, also insgesamt werden
  
  var total = bill*1 + tip;
Hier arbeiten demo: http://jsfiddle.net/5GQZ8/

InformationsquelleAutor Yuriy Galanter

-1

<!DOCTYPE html>
<head>
<title>Tip Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <header>
        <h1>Tip Calculator</h1>
    </header>
    <form>
        Amount: $<input id="bill" type="text">
        <br>
        <a onclick="calc()">Calculate</a>
        <br>
        Tip: <span id="tip"></span>
        <br>
        Total: <span id="total"></span>
    </form>
</div>
<script>
    function calc() {
        var bill = document.getElementById('bill').value;
        var tip = bill * .15;
        var btotal = bill + tip;

        document.getElementById("tip").innerHTML= "$"+Number(tip);
        document.getElementById("total").innerHTML= "$"+Number(btotal);
    }
</script>
</body>

Deine Antwort eigentlich nicht beheben die Mehrheit der Probleme. Möchten Sie vielleicht zu test-code vor der Veröffentlichung in die Zukunft.
-1 keine Erklärung

InformationsquelleAutor Coder

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.