How to, via javascript, display the content according to the variable?

Question

I am trying to create an HTML page where if the month is picked, the correct dates will display in a table.

I have a function where it gets today's month and the user is able to switch between the months, but I am unsure on how I can get all of the days.
I don't need the numbers to be displayed, just the right amount of empty table rows/table data for the month's days.

So for example, when the webpage is selected, and today's month is februari, a empty table with the current days will display: i.e, 29 empty tables will show up - and the same if you decide to scroll to another day.

var month = new Date();
var index = month.getMonth();

var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
document.getElementById("todayField").innerHTML = months[month.getMonth()];

function next() {
  var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
  var nextMonth = index + 1 > 11 ? 0 : index + 1;
  index = nextMonth
  document.getElementById("todayField").innerHTML = months[nextMonth];
}

function prev() {
  var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
  var nextMonth = index - 1 < 0 ? 11 : index - 1;
  index = nextMonth
    // console.log(nextMonth)
  document.getElementById("todayField").innerHTML = months[nextMonth];
}
document.getElementById("prev").addEventListener("click", function() {
  prev();
})
document.getElementById("next").addEventListener("click", function() {
  next();
})

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <p>Click to change day</p>
    <button type="button" name="btnPrev" onclick="prev()">&lt;</button>
    <button type="button" name="btnNext" onclick="next()">&gt;</button>
    <p id="todayField"></p>
    <p>You can find the days below</p>
  </body>

</html>

Thanks in advance! :)

I'm not sure what your question is, it seems your already know how to display the value of a JS variable (you used `document.getElementById("todayField").innerHTML = months[nextMonth];`)!? Do you need help with displaying a list of the days of a month? — xander, Feb 02 '18 at 09:27
You have a couple of errors you should fix first: not escaping `>` and `<` in HTML, wrong calls for `getElementById("prev")` and `getElementById("next")`, etc. — GalAbra, Feb 02 '18 at 09:31
Additionally, you don't have any map from the months' names to their number of days and you didn't mention the shape of the table you want to create (7 columns?) — GalAbra, Feb 02 '18 at 09:34
@GalAbra thanks for your input! but the ">" and "<" does work when I try to run it. Yes, 7 columns would be great! Do you have any idea of how I could do that? — Alison, Feb 02 '18 at 09:37
@xander yes exactly! but I dont want it as a list, I want it as empty tables. — Alison, Feb 02 '18 at 09:37

score 2 · Answer 1 · answered Feb 02 '18 at 09:33

I would create a function returning the number of days of selected month. https://stackoverflow.com/a/47188148/3793309 has what it needs:

function daysInMonth(month, year) {
    var days;
    switch (month) {
        case 1: // Feb, our problem child
            var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
            days = leapYear ? 29 : 28;
            break;
        case 3: case 5: case 8: case 10: 
            days = 30;
            break;
        default: 
            days = 31;
        }
    return days;
},

you can call this function with the index of your month e.g. March:

[...]
var months = ["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober", "November", "December"];
var index = months.indexOf("Mars");
var year = 2018;
var count = daysInMonth(index, year);

this should be enough to apply to your needs.

hth

when I put it in my code, nothing happens, not sure if im doing it wright — Alison, Feb 02 '18 at 09:41
you need to write up more code maintaining the table. i just gave you a hint how to determine month's day count. i will append code for table maintenance to my answer — Yuna, Feb 02 '18 at 09:43
@Alison looks like you want to get code running you had several issues with (according to your profile) so i would recommend putting your code on github and start discussing instead of using SO. feel free to send me a DM — Yuna, Feb 02 '18 at 09:50

GalAbra · Accepted Answer · 2018-02-02T12:31:05.050

I've added a function the draws the table, and left you the implementation of a function that receives the month's name as input and returns the number of days in it.

Note that I've added another <p> element with the table already ready inside of it.

You can use @jayjay bricksoft's answer to help you with that.

Good luck!

var month = new Date();
var index = month.getMonth();

var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
document.getElementById("todayField").innerHTML = months[month.getMonth()];

// Draws a table for the current month
drawTable(daysInMonth(index, 2018));

function next() {
  var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
  var nextMonth = index + 1 > 11 ? 0 : index + 1;
  index = nextMonth;
  document.getElementById("todayField").innerHTML = months[nextMonth];
  drawTable(daysInMonth(index, 2018));
}

function prev() {
  var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
  var nextMonth = index - 1 < 0 ? 11 : index - 1;
  index = nextMonth;

  // console.log(nextMonth)
  document.getElementById("todayField").innerHTML = months[nextMonth];
  drawTable(daysInMonth(index, 2018));
}

function daysInMonth(month, year) {
  var days;
  switch (month) {
    case 1: // Feb, our problem child
      var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
      days = leapYear ? 29 : 28;
      break;
    case 3:
    case 5:
    case 8:
    case 10:
      days = 30;
      break;
    default:
      days = 31;
  }
  return days;
}

function drawTable(daysInMonth) {
  var cellsToDraw = daysInMonth;
  var table = document.getElementById("table");
  table.innerHTML = "";
  for (r = 0; r < (daysInMonth / 7); r++) {
    var newRow = document.createElement("tr");
    table.appendChild(newRow);
    for (c = 0; c < 7 && cellsToDraw > 0; c++) {
      var newCell = document.createElement("td");
      newRow.appendChild(newCell);
      newCell.innerHTML = "&nbsp;";
      cellsToDraw--;
    }
  }
}

td {
  border: solid 1px black;
  width: 30px;
  height: 30px;
}

<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <p>Click to change day</p>
  <button type="button" name="btnPrev" onclick="prev()">&lt;</button>
  <button type="button" name="btnNext" onclick="next()">&gt;</button>
  <p id="todayField"></p>
  <p>You can find the days below</p>
  <div>
    <table id="table"></table>
  </div>
</body>

</html>

Thank you! but when I run the code snippet, nothing happens. — Alison, Feb 02 '18 at 11:45
That's because you need to fill in the implementation of the `daysInMonth(monthName)` function — GalAbra, Feb 02 '18 at 11:47
this is what I tried, but nothing happend: var table = document.getElementById("table"); var row = table.insertRow(0); var cell1 = row.insertCell(0); cell1.innerHTML = drawTable(daysInMonth(months[nextMonth])); — Alison, Feb 02 '18 at 12:17
@Alison I've edited my answer, with jayjay bricksoft's answer. Check the complete code now — GalAbra, Feb 02 '18 at 12:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164408/discussion-between-alison-and-galabra). — Alison, Feb 02 '18 at 13:37
Is there a way of making the tables (td) clickable? Like making them into radio buttons? — Alison, Feb 02 '18 at 19:56

How to, via javascript, display the content according to the variable?

2 Answers2