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: ie, 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()"><</button> <button type="button" name="btnNext" onclick="next()">></button> <p id="todayField"></p> <p>You can find the days below</p> </body> </html>
Thanks in advance! :)
2 answers
solution1
2 2018-02-02 09:33:09
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 eg 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
solution2
1 ACCPTED 2018-02-02 10:01:28
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 = " "; 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()"><</button> <button type="button" name="btnNext" onclick="next()">></button> <p id="todayField"></p> <p>You can find the days below</p> <div> <table id="table"></table> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.