显示选项 select 上 HTML 的日期

Question

我正在处理一个 HTML 文件，其中有一个月份下拉列表。当我 select 一个月时，我希望函数以这种格式在页面上显示该月的日期：

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

下面是我的html:

我无法让函数在选项 select 上执行。你能帮我看看脚本有什么问题吗？我还不是 javascript 方面的专家，但我一直在探索和试验 HTML 和 javascript。

请注意，当我获得这两个月的功能执行时，我将添加其他月份的代码。

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

var mv = m.value;

我认为这一行应该在 showdates() 函数中

function showdates(){
var mv = m.value;
...
...
}

Answer 2

在您的脚本中，您需要将 mv 移动到函数中但是
添加“请select”
DRY 不要重复自己

这是一个更好的脚本

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>

显示选项 select 上 HTML 的日期

Showing dates on HTML on option select

html

javascript

loops

html-select