Why does my input not update when I run it in my browser? - Javascript

Question

I'm learning basic Javascript, and I'm trying to make a tip calculator.

I got most of my program done, but when it's running my values they are stuck on 0. I identified by id and made sure that they are the right names and ran them in console log. Upon running it the alert says "enter valid numbers", so I know that nothing happens to it.

I looked at similar programs and see that there's no issue even though much of the code is similar. This might be a simple solution but any help would be appreciated!

var bill = document.getElementById("cost").value;
var tip = document.getElementById('tip').value;



function totalBill() {
  if (tip >= 1) {
    tip = tip / 100;
  }

  if (bill === "" || tip === 0) {
    alert("enter valid numbers")
    return;
  }
  var total = Math.round((bill * tip));
  total.toFix(2);
  document.getElementById('totalText').innerHTML = total;

}
document.getElementById("c").onclick = function() {
  totalBill();
};

body {
  font-family: Roboto;
  background: white;
  /* fallback for old browsers */
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#calculator {
  height: 350px;
  width: 360px;
  margin: 0px auto;
  background-color: yellow;
  padding: 10px;
  text-align: center;
}

input {
  font-weight: bold;
}

h1 {
  text-align: center;
  background: #B03060;
  color: white;
  margin: 0;
  padding: 10px 100px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  border-top-left-radius: ;
  border-top-right-radius: 20px;
}

button {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin: 30px auto;
  background: red;
  border-radius: 2px;
  width: 200px;
  height: 50px;
  font-size: 14px;
  color: white;
}

button:hover {
  transition: 1s;
  background: white;
  color: black;
}

#result {
  text-align: center;
}

p {
  text-align: center;
  padding-left: 20px;
}

<html lang="en" dir="ltr">
<link rel="stylesheet" href="style.css">

<body>
  <div id="contain">
    <h1>
      <meta charset="utf-8">
      <title>calculator</title>
      How much is the tip?
    </h1>

    <div id="calculator">
      <form>
        <p>How much was your meal?</p>
        <p>$<input id="cost" type="text" placeholder="Enter Cost"></p>
        <p>How much do you want to tip?</p>
        <p><input id="tip" type="text" placeholder="Enter percentage">%</p>

        <button type="button" id="c">Calculate!</button>
      </form>
    </div>
  </div>
  <div id="result">
    <sup>$</sup><span id="totalText">0.00</span>
  </div>
</body>


</html>

Your <meta> and <title> tags should be inside the <head> of the document — Shiny
– Shiny, Commented Jan 6, 2020 at 0:06
Also, if possible, you should use Stack Overflow's Code Snippet feature to create live examples, rather than using code blocks - How to create Code Snippets — Shiny
– Shiny, Commented Jan 6, 2020 at 0:09
@Light For sure I can adjust no problem, still new to Stack Overflow! — itzknockout
– itzknockout, Commented Jan 6, 2020 at 0:18

Shiny · Accepted Answer · 2020-01-06 00:02:46Z

You need to move your .getElementById assignments inside your function, so that they're updated each time you run the function - right now you're only getting the .value() once; when the page is loaded, and those inputs are empty

When you get these values in your function, they're going to be Strings. To use operators like + on them without unexpected effects (joining the Strings together) you should turn them into Numbers - You could use either .parseFloat() to keep decimals, or .parseInt() to get just the interger

// Assuming an input of '12.50'
document.getElementById("cost").value                 // Returns '12.50'
parseFloat(document.getElementById("cost").value)     // Returns 12.50
parseInt(document.getElementById("cost").value, 10)   // Returns 12

The second , 10) in parseInt is specifying the base - Don't forget that or people will hate you

Finally, your Math was wrong for calculating the total paid; It should add the tip amount onto the total, and then display this value

There are other small issues and imperfections, but I leave those as a an exercise to the reader

function totalBill() {
  var bill = parseFloat(document.getElementById("cost").value);
  var tip = parseFloat(document.getElementById('tip').value);

  if (tip > 0) {
    tip = tip / 100;
  }

  if (bill === "" || tip === 0) {
    alert("enter valid numbers")
    return;
  }

  let total = Math.round(bill += bill * tip).toFixed(2);

  document.getElementById('totalText').innerHTML = total;

}
document.getElementById("c").onclick = function() {
  totalBill();
};

body {
  font-family: Roboto;
  background: white;
  /* fallback for old browsers */
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#calculator {
  height: 350px;
  width: 360px;
  margin: 0px auto;
  background-color: yellow;
  padding: 10px;
  text-align: center;
}

input {
  font-weight: bold;
}

h1 {
  text-align: center;
  background: #B03060;
  color: white;
  margin: 0;
  padding: 10px 100px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  border-top-left-radius: ;
  border-top-right-radius: 20px;
}

button {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin: 30px auto;
  background: red;
  border-radius: 2px;
  width: 200px;
  height: 50px;
  font-size: 14px;
  color: white;
}

button:hover {
  transition: 1s;
  background: white;
  color: black;
}

#result {
  text-align: center;
}

p {
  text-align: center;
  padding-left: 20px;
}

<div id="contain">
  <h1>How much is the tip?</h1>

  <div id="calculator">
    <form>
      <p>How much was your meal?</p>
      <p>$<input id="cost" type="text" placeholder="Enter Cost"></p>
      <p>How much do you want to tip?</p>
      <p><input id="tip" type="text" placeholder="Enter percentage">%</p>

      <button type="button" id="c">Calculate!</button>
    </form>

    <div id="result">
      <sup>$</sup><span id="totalText">0.00</span>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Why does my input not update when I run it in my browser? - Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related