Change class of link based on getMonth() with Javascript

Question

I am trying to create some short code that will change the class of a group of links based on the current month. Basically, if the month has past, "a" will be class="inactive", if the month is current, "a" will be class="active", and if the month hasn't occurred yet it will be class="none".

This is for some blog code that I want to automatically update with javascript so that when the month changes, the recently past month (and all previous months) switch to the class "inactive" and the new month becomes "active", which are styles defined by my CSS.

Here is my HTML for the block:

<div class="container">
    <div><a id="item1" class="inactive" href="january.html">january</a></div>
    <div><a id="item2" class="inactive" href="february.html">february</a></div>
    <div><a id="item3" class="inactive" href="march.html">march</a></div>
    <div><a id="item4" class="inactive" href="april.html">april</a></div>
    <div><a id="item5" class="inactive" href="may.html">may</a></div>
    <div><a id="item6" class="inactive" href="june.html">june</a></div>
    <div><a id="item7" class="inactive" href="july.html">july</a></div>
    <div><a id="item8" class="active" href="august.html">august</a></div>
    <div><a id="item9" class="none" href="september.html">september</a></div>
    <div><a id="item10" class="none" href="october.html">october</a></div>
    <div><a id="item11" class="none" href="november.html">november</a></div>
    <div><a id="item12" class="none" href="december.html">december</a></div>
</div>

As you can see the idea is to use a getMonth() script to change the class of the August code to "inactive", and change the September class to "active" once we reach the month of September.

I have seen a lot of snippets of Javascript that could work but am honestly not sure of the best route to take to accomplish this, as my Javascript skills are not so great. Perhaps a loop would be preferable since it can take an ID of the "a", maybe using an array, that could run a check then write the appropriate class based on a getMonth() variable?

Here is some of the code I'm working with so far:

<script>
var item = [1,2,3,4,5,6,7,8,9,10,11,12];
iLen = item.length;

for (i = 0; i < iLen; i++) {
    if(item[i]<getMonth()) {
        document.getElementById("item").class="inactive";
    } else if(item[i]==getMonth()) {
        document.getElementById("item").class="active";
    } else if(item[i]>getMonth()) {
        document.getElementById("item").class="none";
}

</script>

Unfortunately I have a hard time with array's so I am running into issues with replacing the class code itself, but I would love your feedback about if this is a good way to go about it.

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Simple solution, live example:

function checkMonth() {
  var item = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var actualMonth = new Date().getMonth() + 1;
  
  for (i = 0; i < item.length; i++) {
    if (item[i] < actualMonth) {
      document.getElementById("item" + (i + 1)).classList.add("inactive");
    } else if (item[i] == actualMonth) {
      document.getElementById("item" + (i + 1)).classList.add("active");
    } else {
      document.getElementById("item" + (i + 1)).classList.add("none");
    }
  }
  
  var exceptionMonth = [3];
  for (i = 0; i < exceptionMonth.length; i++) {
    document.getElementById("item" + exceptionMonth[i]).classList.add("none");
  }
  
}

.inactive {
  color: gray;
}

.active {
  color: limegreen;
  font-weight: bold;
}

.none {
  color: silver;
}

<body onload="checkMonth();">

  <div class="container">
    <div><a id="item1" href="january.html">january</a></div>
    <div><a id="item2" href="february.html">february</a></div>
    <div><a id="item3" href="march.html">march</a></div>
    <div><a id="item4" href="april.html">april</a></div>
    <div><a id="item5" href="may.html">may</a></div>
    <div><a id="item6" href="june.html">june</a></div>
    <div><a id="item7" href="july.html">july</a></div>
    <div><a id="item8" href="august.html">august</a></div>
    <div><a id="item9" href="september.html">september</a></div>
    <div><a id="item10" href="october.html">october</a></div>
    <div><a id="item11" href="november.html">november</a></div>
    <div><a id="item12" href="december.html">december</a></div>
  </div>

</body>

Second question:

var monthNames = ["January", "February", "March", "April", "May", "June"];
monthNames.push("July", "August", "September", "October", "November", "December");

var actualMonth = document.getElementsByClassName("pagetitle");

for (i = 0; i < actualMonth.length; i++) {
  var monthNome = monthNames[new Date().getMonth()].toUpperCase();
  // toUpperCase() on both sides to simlulate an ignoreCase
  if (actualMonth[i].innerText.toUpperCase().indexOf(monthNome) != -1) {
    actualMonth[i].classList.add("spotlightMonth");
  }
}

body {
  border: 1px solid whitesmoke;
}

table {
width: 100%;
  text-align: center;
}

.pagetitle {
  display: grid;
  font-size: 13px;
  text-align: center;
}

.spotlightMonth {
  color: blue;
  font-size: 26px;
  font-weight: bold;
}

div {
  margin: 26px;
}

<table>
  <td class="pagetitle">March</td>
  <td class="pagetitle">August</td>
  <td class="pagetitle">December</td>
</table>

<div>This month is August</div>
<div>Remember just pagetitle class will be styled with spotlightMonth class</div>

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 09 '19 at 22:48

ℛɑƒæĿᴿᴹᴿ

4,983
4
38
58

1

Hmm I like this solution but it does not seem to be working- the output is only paying attention to the currently defined class in the a block. If I delete the class="" from the html, the script does not overwrite or do anything. (I tested this by assigning "var actualMonth = 6" instead and the links did not change to what should have been June) – Fablezim Aug 09 '19 at 23:13
@Fablezim I made some changes, now it's working perfect. – ℛɑƒæĿᴿᴹᴿ Aug 09 '19 at 23:31
1

Perfect, yes it is! One more question for you- do you think there is a way to override this code if I needed to? For example, if I skipped the month of March and I want the March link to permanently be class="none", could I do that without breaking your code? – Fablezim Aug 09 '19 at 23:45
Of course friend, in programming everything is possible. With the setting you can set the exceptional months you want to apply the 'none' style that the code will do, for example if you use [3,4] the months of March and April will change. If the exceptionMonth array is empty [] nothing will be done. – ℛɑƒæĿᴿᴹᴿ Aug 10 '19 at 00:00
1

Absolutely- thanks for your help! I have ONE last question haha, sorry, but the last thing I would like to implement is to highlight the current month that the user is viewing. So the "active" link would actually be whatever page the user is on (ie. January) and would change back to "inactive" when the user goes to another page, at which point THAT month would be highlighted. Is this a separate question I should ask or can that semi-easily be implemented into this code as well? – Fablezim Aug 10 '19 at 01:04
Do all pages in a current month have an identifier? For example, a field that contains the date of publication? Or a header with the reference of the month you want to style? – ℛɑƒæĿᴿᴹᴿ Aug 10 '19 at 01:30
1

Well the month URL is just the month name so I was looking at URL detection methods (such as href.indexOf('january')) but I am not sure what to compare it against to match it up with that single "a" link for the month of January. I do have a "td" with the class of "pagetitle" which contains the month name if that helps? [ February – Fablezim Aug 10 '19 at 01:39
@Fablezim Maybe it would be better to put in another question, but I will ease your problem and I will add the answer in that same question. – ℛɑƒæĿᴿᴹᴿ Aug 10 '19 at 02:30
1

Hey again Rafael; this code might have some issues on IE & Edge, any ideas why? – Fablezim Aug 10 '19 at 20:28
@Fablezim I made a little change to able cross-browser support. This is the cause: https://stackoverflow.com/questions/36574351/includes-not-working-in-internet-explorer – ℛɑƒæĿᴿᴹᴿ Aug 12 '19 at 14:27

Change class of link based on getMonth() with Javascript

1 Answers1

Simple solution, live example:

Second question: