Search code examples
javascripthtmldatediff

Script not working. Lint says Semicolon required

I am a beginner to Javascript Programming and have run into an error I cannot work out as I don't understand the code. Lint tells me there is a semi colon needed before the line var dString = "September, 25, 2015";. I did have this working and don't know what I changed. I got the code from this question.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>
    Saving
  </title>
</head>

<body>
  <script>
    function myFunction() {
      if (txtMoneySaved.value !== "" && !isNaN(txtMoneySaved.value) && txtMoneyGoal.value !== "" && !isNaN(txtMoneyGoal.value)) {
        // It's a number
        numValue = parseFloat(txtMoneySaved.value);
        DollarGoal = parseFloat(txtMoneyGoal.value);
        document.getElementById("demo").innerHTML = numValue;

        var DateDiff = {
          inDays: function(d1, d2) {
            var t2 = d2.getTime();
            var t1 = d1.getTime();
            return parseInt((t2 - t1) / (24 * 3600 * 1000), 10);
          },
          inWeeks: function(d1, d2) {
            var t2 = d2.getTime();
            var t1 = d1.getTime();
            return parseInt((t2 - t1) / (24 * 3600 * 1000 * 7), 10);
          },
          inMonths: function(d1, d2) {
            var d1Y = d1.getFullYear();
            var d2Y = d2.getFullYear();
            var d1M = d1.getMonth();
            var d2M = d2.getMonth();
            return (d2M + 12 * d2Y) - (d1M + 12 * d1Y);
          },
          inYears: function(d1, d2) {
            return d2.getFullYear() - d1.getFullYear();
          }
        }

        var dString = "September, 25, 2015";

        var d1 = new Date();
        var d2 = new Date(dString);

        var DolsDay = (DollarGoal - numValue) / DateDiff.inDays(d1, d2);
        var DolsWeek = (DollarGoal - numValue) / DateDiff.inWeeks(d1, d2);
        var DolsMonth = (DollarGoal - numValue) / DateDiff.inMonths(d1, d2);

        document.getElementById("DaysRemaining").innerHTML = "Number of <b>days</b> until " + dString + "<b>:</b> " + DateDiff.inDays(d1, d2) + "<br>Dollars per day to reach $8000<b>:</b> $" + DolsDay.ToFixed(2);
        document.getElementById("WeeksRemaining").innerHTML = "Number of <b>weeks</b> until " + dString + "<b>:</b> " + DateDiff.inWeeks(d1, d2) + "<br>Dollars per week to reach $8000<b>:</b> $" + DolsWeekToFixed(2);
        document.getElementById("MonthsRemaining").innerHTML = "Number of <b>months</b> until " + dString + "<b>:</b> " + DateDiff.inMonths(d1, d2) + "<br>Dollars per month to reach $8000<b>:</b> $" + DolsMonthToFixed(2);
      }
      //else some error message
    }
  </script>

  Enter the amount saved: <input type="text" name="Saved" id="txtMoneySaved" value="100"> Enter the goal amount:&nbsp;&nbsp;<input type="text" name="Goal" id="txtMoneyGoal" value="8000">

  <button onclick="myFunction()">Try it</button>

  <p id="demo"></p>

  <p id="DaysRemaining"></p>
  <p id="WeeksRemaining"></p>
  <p id="MonthsRemaining"></p>
  <p id="YearsRemaining"></p>

</body>

</html>

Solution

  • The semicolon is optional. Ignore that warning, it's not your problem.

    You have a couple of typos:

    1. DolsDay.ToFixed(2) should be DolsDay.toFixed(2). Method names are case-sensitive
    2. The next two lines forget the . before ToFixed, and should also use a lowercase t.
    document.getElementById("DaysRemaining").innerHTML = "Number of <b>days</b> until "+dString+"<b>:</b> "+DateDiff.inDays(d1, d2)+"<br>Dollars per day to reach $8000<b>:</b> $"+DolsDay.toFixed(2);
document.getElementById("WeeksRemaining").innerHTML = "Number of <b>weeks</b> until "+dString+"<b>:</b> "+DateDiff.inWeeks(d1, d2)+"<br>Dollars per week to reach $8000<b>:</b> $"+DolsWeek.toFixed(2);
document.getElementById("MonthsRemaining").innerHTML = "Number of <b>months</b> until "+dString+"<b>:</b> "+DateDiff.inMonths(d1,d2)+"<br>Dollars per month to reach $8000<b>:</b> $"+DolsMonth.toFixed(2);

    Fixed example, still without the (optional, but nice for readability) semicolon: http://codepen.io/paulroub/pen/Lbkno