CODEWITHSUNDEEP
javascriptjqueryhtml
acr
acr

Reputation: 1746

Loop through months using javascript

I have a date texbox to select a date and by using that selected month, I need to loop through the months. For example, if I select today's date I need to showing March as starting month and loop through the months for n number of times. But the problem I am facing here is, after the month of December, I am getting undefined error.

Any idea how to resolve it ?

Fiddle: https://jsfiddle.net/anoopcr/fyaeyg7r/

HTML:

<div class="inputQL">
  <div class="InputQuest">Loan start date</div>
  <div> 
    <input type="date" id="date" class="date"></input>
  </div>
  <div id="hiddendate" class="hiddendate"></div>
</div>

<div id="table_header" class="table_header">
  <table cellpadding="15" border="1">
    <tr>
      <td width="100" align="center"><b>SI No</b></td>
      <td width="100" align="center"><b>month</b></td>
      <td width="100" align="center"><b>balance</b></td>
    </tr>
  </table>
</div>

<div id="table" class="table"> </div>

Javascript :

date.onchange = function() {
  table();
}

$(document).ready(function() {
  document.getElementById("date").valueAsDate = new Date();
  table();
})


function table() {
  var mo = new Array(12);
  mo[0] = "January";
  mo[1] = "February";
  mo[2] = "March";
  mo[3] = "April";
  mo[4] = "May";
  mo[5] = "June";
  mo[6] = "July";
  mo[7] = "August";
  mo[8] = "September";
  mo[9] = "October";
  mo[10] = "November";
  mo[11] = "December";

  var date = new Date(document.getElementById("date").value);
  var day = date.getUTCDate();
  var month = mo[date.getUTCMonth()];
  var year = date.getFullYear();

  document.getElementById("hiddendate").innerHTML = month;

  var loanstart = month;
  var amnttext = 1;
  var payment_counter = 1;

  var table = "";

  table += "<table cellpadding='15' border='1'>";

  var n = 0;
  while (amnttext < 24) {

    var loanstart = mo[date.getUTCMonth() + n];

    //display rows
    table += "<table cellpadding='15' border='1'>";
    table += "<tr>";

    table += "<td width='100'>" + payment_counter + "</td>";
    table += "<td width='100'>" + loanstart + "</td>";
    table += "<td width='100'>" + amnttext + "</td>";

    if (n < 12) {
      n++;
    } else {
      n = 0;
    }

    amnttext++;

    payment_counter++;

  table += "</table>";

  document.getElementById("table").innerHTML = table;
}

Upvotes: 0

Views: 1957

Answers (2)

Vimarsh
Vimarsh

Reputation: 95

In your code, when n = 11 you increment it rather than making it 0. Now n = 12 and you get the error as mo[12] is out of bounds.

You can just change the snippet to

if (n<11) {
    n++;
} else {
    n=0;
}

Although, I agree @milbrandt's answer is a cleaner way to handle this use case.

Upvotes: 0

milbrandt
milbrandt

Reputation: 1486

One issue is that you access the array mo out of it's limits in 

var loanstart = mo[date.getUTCMonth()+n];

Take the modulo by 12 and that Access Violation should be fixed:

var loanstart = mo[(date.getUTCMonth()+n) % 12];

P.S.: As @Vimarsh oberserved, the condition if (n < 12) can be removed completely when using the modulo.

Upvotes: 1

Related Questions