Question

135

Javascript Tip Calculator

rated 0 times [ 142] [ 7] / answers: 1 / hits: 16060 / 11 Years ago, wed, january 22, 2014, 12:00:00

I'm working on a tip calculator in Javascript where the user should be able to type in the amount of the bill, push calculate, and see both the tip and the total (which includes the bill and the tip).

I've been working at this for a while, but can't seem to make it work correctly.

<!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>

Any suggestions?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kevenjeffreyr

Add To Favorites

Follow

Total Points: 286

Total Questions: 112

Total Answers: 95

Location: Zambia

Member since Thu, Jun 25, 2020

4 Years ago

answered 11 Years ago parker · Accepted Answer

Forms are typically used to submit data to a server for various reasons. However, they have some benefits even when everything is being done on the same page (such as being able to press enter in any input and still have it submit without using extra code). What I did here was give it an action of the function you wanted to use and then changed your button to a standard submit.

There are various methods for taking a string and making it into a number, I used the simplest here: Number(). I used it on bill in order to make the total_bill display properly (instead of adding two strings together which just places them side by side). I changed total to total_bill for the variable because it is just not a good idea to name multiple things the same (e.g. the id and the variable). I missed the bill/bill, but I'll leave it as is because it does usually still work (like here).

Lastly, toFixed() takes a number and makes it a string. Which means you have to make sure it's a number and not already a string. This is why Number() was used again before outputting.

Try this:

<!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>