ReferenceError: документ не определяется в VSCODE при попытке подключить JS к HTML и загрузить его в браузер Chrome [зак ⇐ Html

[Anonymous]

Я пытаюсь сделать проект в Chrome Browser, содержащий HTML, CSS и JS. Все они находятся в одной папке проекта и не имеют видимых синтаксических ошибок. Я пишу код в VSCODE. В Broswer я могу просматривать компоненты HTML и CSS, но компоненты JS не отображаются. В терминале говорится, что ReferenceError: документ не определен. Я знаю, что это что -то при загрузке файла JS в веб -браузер, но я не совсем уверен, в чем проблема и как его исправить.


Thad Website








Thad Website













Mon
Tue
Wed
Thu
Fri
Sat
Sun








< /code>
css: < /p>
.heading {
background-color: lightblue;
width: 100%;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
}
.head-name {
width: fit-content;
height: 75px;
font-size: 50px;

}
.thadlogo {
height: 70px;
width: 70px;
border-style: solid;
border-color: darkblue;
border-width: 2.5px;
margin-right: auto;
}
.main {
width: 100%;
height: 100%;
background: linear-gradient(160deg, lightblue, darkblue);
display: flex;
align-items: center;
justify-content: center;
}
.calender {
width: 380px;
height: auto;
display: flex;
flex-direction: column;
padding: 10px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.calender-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.monthYear {
text-align: center;
font-weight: 600;
width: 150px;
}
.calender-head button {
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
width: 40px;
height: 40px;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.days {
display: grid;
grid-template-columns: repeat(7,1fr);
}
.day {
text-align: center;
padding: 5px;
color: #999FA6;
font-weight: 500;
}
.dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.date {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
margin: auto;
cursor: pointer;
font-weight: 600;
border-radius: 50%;
width: 40px;
height: 40px;
transition: 0.2s;
}

.date:hover, .date.active {
background: #ff5869;
color: #fff;
}
.date.inactive {
color: #d2d2d2;
}
.date.inactive:hover {
color: #fff;
}
< /code>
javascript: < /p>
const monthYearElement = document.getElementsById('monthYear');
const datesElement = document.getElementsById('dates');
const prevBtn = document.getElementsById('prevBtn');
const nextBtn = document.getElementsById('nextBtn');

let currentDate = new Date();

const updateCalender = () => {
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
const firstDay = new Date(currentYear, currentMonth, 0);
const lastDay = new Date(currentTear, currentMonth + 1, 0);
const totalDays = lastDay.getDate();
const firstDayIndex = firstDay.getDay();
const lastDayIndex = lastDay.getDay();

const monthYearString = currentDate.toLocaleString('default', {month: 'long', year: 'numeric'});
monthYearElement.textContent = monthYearString;

let datesHTML = '';

for(let i = firstDayIndex; i > 0; i--) {
const prevDate = new Date(currentYear, currentMonth, 0 - i + 1);
datesHTML += `${prevDate.getDate()}`;
}

for(let i = 1; i {
currentDate.setMonth(currentDate.getMonth() - 1);
updateCalender();
})

nextBtn.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
updateCalender();
})

updateCalender();


Подробнее здесь: https://stackoverflow.com/questions/797 ... ct-js-to-h