Why is my tipping calculator only returning 0 for tip?


#1

My tipping calculator works with the cost but it doesn’t add in the tip. The tip shows 0 and the total cost just shows the original cost with no tip added. :frowning:
Any help would be much appreciated. :slight_smile:

HTML:

  <link rel="stylesheet" type="text/css" href="C:\\Users\\Brittany\\Documents\\randomProjectsCoding\\tippingWebsite.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  </head>
  <body>
    <form>
      <h1>Tipping Calculator</h1>
      <h2>What is the cost?</h2>
      <input id="itemCost" type="text"></input>
      <h2>What is your desired tip %?</h2>
      <input type="radio" value="10" name="percent">10%</input><br>
      <input type="radio" value="15" name="percent">15%</input><br>
      <input type="radio" value="20" name="percent">20%</input><br>
      <br>
      <button id="submit" type="button" value="enter"><i class="fas fa-heart"></i> Submit <i class="fas fa-heart"></i></button>
      <h2>Amount to tip is:</h2>
      <h1 id="tip"></h1>
      <h2>Total cost is:</h2>
      <h1 id="total"></h1>
    </form>
    <script type="text/javascript" src="C:\\Users\\Brittany\\Documents\\randomProjectsCoding\\tippingWebsite.js"></script>
  </body>

Javascript:

document.getElementById("submit").addEventListener("click", calculate);
function calculate(){
  let itemCost = document.getElementById("itemCost");
  let radio = document.getElementsByClassName('percent');
  var tipAmount = 0;
  for (var i = 0, length = radio.length; i < length; i++)
  {
    if (radio[i].checked)
    {
     tipAmount = parseFloat(radio[i].value);
     return tipAmount;
    break;
    }
  }
    let tip = parseFloat(itemCost.value) * (parseFloat(tipAmount)/100);
    document.getElementById('tip').innerHTML = tip;
    let total = parseFloat(tip) + parseFloat(itemCost.value);
    document.getElementById("total").innerHTML = total;
}

#2

your loop:

for (var i = 0, length = radio.length; i < length; i++)

doesn’t look quite right

You can’t declare length inside the loop like you just do here


#3

I changed it to this:
for (var i = 0; i < radio.length; i++)
still doesn’t work :frowning:


#4
      <h2>What is the cost?</h2>
      <input id="itemCost" type="text"></input>
      <h2>What is your desired tip %?</h2>
      <input type="radio" value="10" name="percent">10%</input><br>
      <input type="radio" value="15" name="percent">15%</input><br>
      <input type="radio" value="20" name="percent">20%</input><br>
      <br>

<input> is a void element, or self-closing tag. It has no text node so we must supply one with a <label>.

      <input id="itemCost" type="text">
      <h2>What is your desired tip?</h2>
      <label for="ten">10% <input type="radio" value="10" name="percent" id="ten"></label>
      <label for="fifteen">15% <input type="radio" value="15" name="percent" id="fifteen"></label>
      <label for="twenty">20% <input type="radio" value="20" name="percent" id="twenty"></label>

#5

Thanks for the feedback, but that didnt fix my problem with zero showing up :disappointed_relieved:


#6

Can we see all the changes you made?

Maybe insert console.log() to see values of variables and use this to pinpoint the problem?

if i insert a console.log:

for (var i = 0; i < radio.length; i++)
  console.log(i)
  {
    if (radio[i].checked)
    {
     console.log('checked')

i see that the whole loop never gets executed, maybe check what the value of radio.length is?

if i do console.log(radio.length) i get 0


#7

I see what your talking about. How would i go about fixing this problem?


#8

maybe check the value of radio variable? I don’t know.


#9

Ok i will. thanks for your help :slight_smile:


#10

I could figure out what the problem is, but i don’t want to spoonfeed you the answer, that would waste a valuable learning opportunity.

If you can’t figure it out, of course feel free to make another reply, show us what you have tried, this way, we have to do less, from which you will learn more (that might sound as a contradiction, but its true)


#11

That won’t have solved anything, only made the HTML valid markup

The document validates according to the specified schema(s)…

https://repl.it/@mtf/Tipping-Calculator