Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <h1>Tip Calculator</h1>
    <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>
</body>
</html>
 
var myBtn = document.getElementById('my-button');
var tipElem = document.getElementById("tip");
var totalElem = document.getElementById("total");
myBtn.addEventListener('click', calc);
function calc(e) {
  e.preventDefault();
  var input = document.getElementById('bill');
  var bill = parseFloat(input.value);
  var tip = bill * 0.15;
  var total = bill + tip;
  
  tipElem.textContent = "$"+(tip).toFixed(2);
  totalElem.textContent = "$"+(total).toFixed(2);  
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers