Showing dates on HTML on option select

I am working on an HTML file that has a drop-down list of months. When I select a month, I want the function to show the dates of the month on the page in this format:

1st of December 2020
2nd of December 2020
.
.
.
31st of December 2020

Below is my html:

I cannot get the function to execute on option select. Could you help me what is wrong with the script? I am no expert in javascript yet but I am continuously exploring and experimenting with HTML and javascript.

Please note that I will be add the codes for the other months when I get the function to execute for these two months.

var ord = "";
var i;
var fulldate;
var y = "";
var m = document.getElementById("month");
var mv = m.value;

function showdates() {
  if (mv == "December") {
    fulldate = "";
    y = "2020";
    for (i = 1; i < 32; i++) {
      if (i > 3 && i < 21) {
        ord = "th";
      } else if (i == 1 || i == 21 || i == 31) {
        ord = "st";
      } else if (i == 2 || i == 22) {
        ord = "nd";
      } else if (i == 3 || i == 23) {
        ord = "rd";
      } else {
        ord = "th";
      }
      fulldate += i + ord + " of " + mv + "" + y + "<br>";
    }
  } else if (mv == "January") {
    fulldate = "";
    y = "2021";
    for (i = 1; i < 32; i++) {
      if (i > 3 && i < 21) {
        ord = "th";
      } else if (i == 1 || i == 21 || i == 31) {
        ord = "st";
      } else if (i == 2 || i == 22) {
        ord = "nd";
      } else if (i == 3 || i == 23) {
        ord = "rd";
      } else {
        ord = "th";
      }
      fulldate += i + ord + " of " + mv + "" + y + "<br>";
    }
  }
  document.getElementById("dates").innerHTML = fulldate;
}

<label for="month">SELECT MONTH</label><br>
<select id="month" name="month" oninput="showdates()">
  <option value="December">December</option>
  <option value="January">January</option>
</select><br>
<p id="dates"></p>

Answer

1. In your script you need to move the mv inside the function BUT
2. Add “please select”
3. DRY Do not repeat yourself

Here is a better script

const nth = d => {
  if (d > 3 && d < 21) return 'th';
  switch (d % 10) {
    case 1:  return "st";
    case 2:  return "nd";
    case 3:  return "rd";
    default: return "th";
  }
};

const showdates = function() {
  const mv = this.value;
  const monthName = this.options[this.selectedIndex].text;
  document.getElementById("dates").innerHTML = "";
  if (!mv) return; // stop
  const now = new Date()
  let yyyy = now.getFullYear();
  if (mv <= now.getMonth())  yyyy++; // next year
  const d = new Date(yyyy, mv - 1, 1, 15, 0, 0); // normalising at 15:00
  const lastDay = new Date(yyyy, mv, 0, 15, 0, 0, 0).getDate() // the 0th of next month
  fullDate = [];
  for (let i = 1; i <= lastDay; i++) {
    fullDate.push(i + nth(i) + " of " + monthName + " " + yyyy);
  }

  document.getElementById("dates").innerHTML = fullDate.join("<br/>");
}
document.getElementById("month").addEventListener("change", showdates);

<label for="month">SELECT MONTH</label><br>
<select id="month" name="month">
  <option value="">Please select</option>
  <option value="12">December</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
</select><br>
<p id="dates"></p>