Cześć
Miał ktoś z Was taka sytuacje, że siada do projektu, który juz robi jakiś czas i nagle kiedy tworzy kolejną nową zmienną coś nie działa w kodzie...
W consoli przeglądarki sprawdzam, czy wydrykuje mi zawartość zmiennej, a tu nagle :
"Uncaught ReferenceError: form is not defined at <anonymous>:1:1"
, więc brne w to dalej i sprawdzam inne zmienne i nazwy funckji i wyskakuje mim to samo, pomimo tego, że wczoraj wszystko śmigało.Zmieniałem w kodzie rzeczy, ale zaraz po ich zmianie i po sprawdzeniu, czy coś to pomogło, odrazu nadpisywałem kod tak jak był początku.Pewnie to zła praktyka, ale jeżeli już nic nie pomaga próbujesz różnych metod.Jestem nowy w tej dziedzinie i cały czas sie jej ucze.
Sprawdzałem na dwóch przeglądarkach tj. chrome i firefox nie używam narazie żadnych bibliotek i frameworkow, uważam, że lepiej narazie pisać w czystym js, żeby sobie go utrwalić.Czy może być to wina programu VSC ?
// Formularz ustawienia daty w kalendarzu //
let today = new Date()
let date = addZero(today.getDate());
let month = addZero(today.getMonth()+1);
let year = today.getFullYear();
let currentDate = `${year}-${month}-${date}`;
document.getElementById(".choose-date").value = currentDate;
// dodawanie 0 //
function addZero(num) {
return num < 10 ? `0${num}`:num;
}
// Kalendarz, data dzisiejsza bez cofania sie na dni poprzednie //
function minDate() {
document.getElementById("choose-date").setAttribute("min", currentDate);
}
minDate();
// Formularz i pokazujące sie spany przy pustych polach //
const form = document.getElementById('form');
const hour = document.getElementById('choose-time');
const nOfP = document.getElementById('nofpeople');
const cellphone = document.getElementById('cellphone');
const email = document.getElementById('email');
const userName = document.getElementById('nameUser');
const addDiv = document.querySelector('.add_info');
let isFormValid = false;
const validateInputs = () => {
// Input imię i nazwisko
userName.classList.remove("invalid");
userName.nextElementSibling.classList.add("hidden");
isFormValid = true;
if(!email.value) {
userName.classList.add("invalid")
userName.nextElementSibling.classList.remove("hidden");
isFormValid = false;
}
// input e-mail
email.classList.remove("invalid");
email.nextElementSibling.classList.add("hidden");
isFormValid = true;
if(!email.value) {
email.classList.add("invalid")
email.nextElementSibling.classList.remove("hidden");
isFormValid = false;
}
// input telefon
cellphone.classList.remove("invalid");
cellphone.nextElementSibling.classList.add("hidden");
isFormValid = true;
if(!cellphone.value) {
cellphone.classList.add("invalid")
cellphone.nextElementSibling.classList.remove("hidden");
isFormValid = false;
}
// liczba osób
nOfP.classList.remove("invalid");
nOfP.nextElementSibling.classList.add("hidden");
isFormValid = true;
if(!nOfP.value) {
nOfP.classList.add("invalid")
nOfP.nextElementSibling.classList.remove("hidden");
isFormValid = false;
}
// input godzina
hour.classList.remove("invalid");
hour.nextElementSibling.classList.add("hidden");
isFormValid = true;
if(!hour.value) {
hour.classList.add("invalid")
hour.nextElementSibling.classList.remove("hidden");
isFormValid = false;
}
};
email.addEventListener('input', () => {
validateInputs();
})
cellphone.addEventListener('input', () => {
validateInputs();
})
nOfP.addEventListener('input', () => {
validateInputs();
})
hour.addEventListener('input', () => {
validateInputs();
})
// funkcja o info, że formularz został wysłany do restauracji!
const addInfo = () => {
if (isFormValid === true) {
addDiv.classList.remove('remove_info');
addDiv.nextElementSibling.classList.add("add_info");
}
}
// wywolywanie funkcji za pomocoa wcisniecia guzika submit
form.addEventListener('submit', (e) => {
e.preventDefault();
validateInputs();
addInfo();
})
Co moge zrobic, żeby to naprawić i jak pracować na przyszłość, żeby takie sytuacje sie nie powtarzały.