let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = document.getElementById("year");
let selectMonth = document.getElementById("month");
var selectedCell =' d';
let btn=document.getElementById("button");
let btnTag=document.getElementById("buttonTag");
btn.addEventListener('click', function(e) {
document.querySelectorAll('#calendar-body td').forEach(e1 => {
if(e1.className === 'bg-success'){
e1.innerHTML += document.getElementById('myTextArea').value;
}
});
});
//btn.addEventListener("click",getText);
let months = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);
function next() {
currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
currentMonth = (currentMonth + 1) % 12;
showCalendar(currentMonth, currentYear);
}
function previous() {
currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
showCalendar(currentMonth, currentYear);
}
function jump() {
currentYear = parseInt(selectYear.value);
currentMonth = parseInt(selectMonth.value);
showCalendar(currentMonth, currentYear);
}
function showCalendar(month, year) {
let firstDay = (new Date(year, month)).getDay();
let daysInMonth = 32 - new Date(year, month, 32).getDate();
let tbl = document.getElementById("calendar-body"); // body of the calendar
// clearing all previous cells
tbl.innerHTML = " ";
// filing data about month and in the page via DOM.
monthAndYear.innerHTML = months[month] + " " + year;
selectYear.value = year;
selectMonth.value = month;
// creating all cells
let date = 1;
for (let i = 0; i < 6; i++) {
// creates a table row
let row = document.createElement("tr");
//creating individual cells, filing them up with data.
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
let cell = document.createElement("td");
let cellText = document.createTextNode(" ");
cell.appendChild(cellText);
row.appendChild(cell);
}
else if (date > daysInMonth) {
break;
}
else {
let cell = document.createElement("td");
let cellText = document.createTextNode(date);
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
cell.classList.add("bg-success");
} // color today's date
cell.appendChild(cellText);
row.appendChild(cell);
date++;
}
}
tbl.appendChild(row); // appending each row into calendar body.
}
document.querySelectorAll('#calendar-body td')
.forEach(e =>{
e.addEventListener("click", adddevnt)});
}
function adddevnt(e) {
// Here, `this` refers to the element the event was hooked on
document.querySelectorAll('#calendar-body td').forEach(e1 => {
e1.className='';
});
e.target.classList.add("bg-success");
}<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kalender</title>
<p></p>
<H1 align="center" style="font-size:80px;" style="font-family: Arial, Verdana;" ;" ><span style="color: white;"</span><i>Kalender</i></H1></span>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<html><head><title>background-color</title>
<style type="text/css">
body { background-color:rgba(34, 65, 20, 0.911); font-weight:bold; font-family:Arial; font-size:100%; }
</style>
</head>
</html>
</head>
<body>
<div class="container col-sm-4 col-md-7 col-lg-6 mt-5">
<div class="card">
<h3 class="card-header" id="monthAndYear"></h3>
<table class="table table-bordered table-responsive-sm" id="calendar">
<thead>
<tr>
<th>So</th>
<th>Mo</th>
<th>Di</th>
<th>Mi</th>
<th>Do</th>
<th>Fr</th>
<th>Sa</th>
</tr>
</thead>
<tbody id="calendar-body">
</tbody>
</table>
<div class="form-inline">
<button class="btn btn-outline-primary col-sm-6" id="previous" onclick="previous()">Zurück</button>
<button class="btn btn-outline-primary col-sm-6" id="next" onclick="next()">Nächster</button>
</div>
<br/>
<form class="form-inline">
<label class="lead mr-2 ml-2" for="month">Wechsel zu: </label>
<select class="form-control col-sm-4" name="month" id="month" onchange="jump()">
<option value=0>Jan</option>
<option value=1>Feb</option>
<option value=2>Mär</option>
<option value=3>Apr</option>
<option value=4>Mai</option>
<option value=5>Jun</option>
<option value=6>Jul</option>
<option value=7>Aug</option>
<option value=8>Sep</option>
<option value=9>Okt</option>
<option value=10>Nov</option>
<option value=11>Dez</option>
</select>
<label for="year"></label><select class="form-control col-sm-4" name="year" id="year" onchange="jump()">
<option value=1990>1990</option>
<option value=1991>1991</option>
<option value=1992>1992</option>
<option value=1993>1993</option>
<option value=1994>1994</option>
<option value=1995>1995</option>
<option value=1996>1996</option>
<option value=1997>1997</option>
<option value=1998>1998</option>
<option value=1999>1999</option>
<option value=2000>2000</option>
<option value=2001>2001</option>
<option value=2002>2002</option>
<option value=2003>2003</option>
<option value=2004>2004</option>
<option value=2005>2005</option>
<option value=2006>2006</option>
<option value=2007>2007</option>
<option value=2008>2008</option>
<option value=2009>2009</option>
<option value=2010>2010</option>
<option value=2011>2011</option>
<option value=2012>2012</option>
<option value=2013>2013</option>
<option value=2014>2014</option>
<option value=2015>2015</option>
<option value=2016>2016</option>
<option value=2017>2017</option>
<option value=2018>2018</option>
<option value=2019>2019</option>
<option value=2020>2020</option>
<option value=2021>2021</option>
<option value=2022>2022</option>
<option value=2023>2023</option>
<option value=2024>2024</option>
<option value=2025>2025</option>
<option value=2026>2026</option>
<option value=2027>2027</option>
<option value=2028>2028</option>
<option value=2029>2029</option>
<option value=2030>2030</option>
</select></form><br><br>
<textarea placeholder="Gebe dein Termin ein" id="myTextArea" cols="20" rows="5"></textarea>
<button id="button">Klick</button>
</div>
</div>
<!--<button name="jump" onclick="jump()">Go</button>-->
<script src="scripts.js"></script>
<!-- Optional JavaScript for bootstrap -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>
输入文字时，文字直接显示在日期旁边。我该怎么做 文本显示在下面一行 如果有人可以发布正确的代码会很好
请添加一些上下文来解释代码部分（或检查您是否将所有问题的格式都错误地设置为代码）。