按钮结果堆叠在一起答案

【问题标题】：Button outcome is stacked on top of each other按钮结果堆叠在一起
【发布时间】：2022-01-24 23:31:04
【问题描述】：

我目前正在制作日历，非常感谢一些帮助，因为我目前正在自己学习 javascript。

每当单击月份按钮时，都会创建一个新输出并将其“堆叠”在原始条目下方。有没有办法让新月份取代旧月份？

我在网上发现了按钮替换问题，但没有发现包含多个按钮/输出的代码。

感谢您的帮助！！这快把我逼疯了！！

<!DOCTYPE html> <!-- states the doctype -->
<html>
<head> <!-- heading -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
</head>
<h1>
Calendar
</h1>

<div id="info" class="btn-group" style="width:100%;">
  <button onclick="daysinmonth(0, 2021)" style="width:20%;">January</button>
  <button onclick="daysinmonth(1, 2021)" style="width:20%;">Febuary</button>
  <button onclick="daysinmonth(2, 2021)" style="width:20%">March</button>
  <button onclick="daysinmonth(3, 2021)" style="width:20%">April</button>
  <button onclick="daysinmonth(4, 2021)" style="width:20%">May</button>
  <button onclick="daysinmonth(5, 2021)" style="width:20%">June</button>
  <button onclick="daysinmonth(6, 2021)" style="width:20%">July</button>
  <button onclick="daysinmonth(7, 2021)" style="width:20%">August</button>
  <button onclick="daysinmonth(8, 2021)" style="width:20%">September</button>
  <button onclick="daysinmonth(9, 2021)" style="width:20%">October</button>
  <button onclick="daysinmonth(10, 2021)" style="width:20%">November</button>
  <button onclick="daysinmonth(11, 2021)" style="width:20%; margin-bottom:40px;">December</button>
</div>

<script>
function daysinmonth(month, year) {
  //clearit();
  var dt = new Date();
  dt.setMonth(month+1);
  dt.setFullYear(year);
  dt.setMonth(dt.getMonth(), 0);
  var lastday = dt.getDate();
  daystomonth(lastday, month, year)
}

function daystomonth(lastday, month, year) {
  dayslist = []
  const d = new Date(year, month, 1);
  var firstday = d.getDay();
  for (i = 1; i < lastday+1; i++) {
    dayslist[i-1] =+ i;
  }
  calender(firstday, dayslist, lastday)
}

function calender(firstday, dayslist, lastday) {
  const body = document.body,
    tbl = document.createElement('table');
    tbl.style.border = '1px solid black';
    tbl.style.boxSizing = 'border-box';

  var daysnames = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY", "SUNDAY"];
  var weekcount = 10; var count = 0;
  var daycount = firstday - 1;
  if (daycount == -1) { //Monday = 1
    daycount = 6;
  }

  for (let i = 0; i < weekcount; i++) {
    const tr = tbl.insertRow();
    if (i == 0) {
    for (let j = 0; j < 7; j++) {
      const td = tr.insertCell();
      td.appendChild(document.createTextNode(`${daysnames[j]}`));
      }
    }
    if (i == 1) {
      const tr = tbl.insertRow();
      for (let j = 0; j < 7; j++) {
        if (daycount <= j) {
          const td = tr.insertCell();
          td.appendChild(document.createTextNode(`${dayslist[count]}`));
          count = count + 1;
        } else {
          const td = tr.insertCell();
          td.appendChild(document.createTextNode(`  `));
        }
      }
    }
    if ( i > 1) {
      for (let j = 0; j < 7; j++) {
        if (count >= lastday) {
          const td = tr.insertCell();
          td.appendChild(document.createTextNode(`  `));
          count = count + 1;
        }
        else {
          const td = tr.insertCell();
          td.appendChild(document.createTextNode(`${dayslist[count]}`));
          count = count + 1;
        }
      }
    }
    if (count >= lastday) {
      weekcount = i + 1;
    } 
  }
  body.appendChild(tbl);
}
</script>

【问题讨论】：

标签： javascript html button replace output

【解决方案1】：

您必须为刚刚创建的表设置一个id

然后，每次调用 calender 函数时删除它每次

function calender(firstday, dayslist, lastday) {
  // find #calendar first
  const calendarElement = document.querySelector('#calendar')
  const body = document.body,
    tbl = document.createElement('table');
    tbl.style.border = '1px solid black';
    tbl.style.boxSizing = 'border-box';

    // set an id for table
    tbl.id = "calendar"
  
  // if any #calendar exist, delete it
  if (calendarElement) {
    calendarElement.remove()  
  }
//...
}

【讨论】：