为什么最后一段代码没有执行?

在我的.js文件中,我在不同的“部分”中分别包含网站的3个页面的代码,这些部分彼此无关。有:

导航栏折叠的代码 ////////////// 显示聊天代码 ////////////// 输入表单验证代码

按此顺序输入表单验证的代码不起作用,但是如果我交换了最后两节

导航栏折叠的代码 ////////////// 输入表单验证代码 ////////////// 显示聊天代码

那么用于输入表单验证的代码有效,但用于显示聊天的代码无效。 在两种情况下,导航栏均可正常工作。 是什么导致该行为?

code:
////////////////////////NAVBAR////////////////////////
const navbar = document.getElementById("navbar");
const icon = document.getElementById('icon');
const dropdown = document.getElementById("dropdown");
const dropdown2 = document.getElementById("dropdown2");
const diveIntroIndex = document.getElementById("dive_intro");
const windIntroIndex = document.getElementById("windsurf_intro");

var prevScrollpos = window.pageYOffset; //when user scroll the page down, nav disappear, reappear when scroll up


/*once the icon in the navbar is clicked, the class "responsive" is added to the element in the navigation bar*/
function openNavbar() {
    if (navbar.className === "navbar") { //if the navbar has the class "navbar"
        navbar.className += " responsive"; //then a new class is added
        icon.className = "fa fa-times"; //the icon changes to an "X"
    } else {
        navbar.className = "navbar"; //else the navbar go back to have a unique class called "navbar"
        icon.className = "fa fa-bars"; //the icon changes to the classic three lines 
    }
}


window.onscroll = function() { //when the screen scroll
    var currentScrollPos = window.pageYOffset; //check if the current scroll is equal the pos of Y in the window
    if (prevScrollpos > currentScrollPos) { //if the prev position was higher
        navbar.style.top = "0"; //it means user is scrolling down, navbar appear

    } else { //else if the user scroll down
        navbar.style.top = "-70px"; //the navbar disappear from the page
        navbar.classList.remove("responsive"); //and it receives the class "responsive"
        icon.className = "fa fa-bars"; //the icon used for smaller screen changes to the classic three lines
        dropdown.firstElementChild.classList.remove("resp"); //the dropdwon content is hidden in case it was still displayed 
        dropdown2.firstElementChild.classList.remove("resp");
    }
    prevScrollpos = currentScrollPos; //the prev scroll variable gets the same value of the current position in the screen
    if (this.prevScrollpos > 300 && this.prevScrollpos < 400) { //if the prev position is higher than 300 and lower than 400
        makeDiveIndexAppear(); //then the text for scuba diving in the index appear
    }

};

if (window.innerWidth < 780) { //if the screen is smallet than 600px
    dropdown.onclick = function(event) { //once the dropdown is clicked
        dropdown.firstElementChild.classList.toggle("resp"); //the first element of dropdown receive the class "resp" (toggle)
    };
    dropdown2.onclick = function() { //same for the second dropdown
        dropdown2.firstElementChild.classList.toggle("resp");
    }
}

window.onload = function() { //when the page loaded
    if (document.URL.includes("index.html") === true) {
        windIntroIndex.classList.remove('hide'); //the intro for windsurf in the index page appear
        windIntroIndex.classList.add('fadeInLeft', 'animated', 'windsurf_intro'); //and will appear on the left
        if (window.innerWidth < 900) { //if the window is less than 900
            makeDiveIndexAppear() //then also the intro for dive will appear
        }
    }
};


function makeDiveIndexAppear() { //function that set the classes to make the text for scuba diving appear in the index page
    diveIntroIndex.classList.remove('hide');
    diveIntroIndex.classList.add('fadeInRight', 'animated', 'dive_intro');
}

//CONTACT//////////////////////////////////////////////////////////
const submit = document.getElementById("submit");
const name = document.getElementById("name");
const email = document.getElementById("email");
const message = document.getElementById("comment");
const nameError = document.getElementById("nameerror");
const emailError = document.getElementById("emailerror");
const messageError = document.getElementById("commenterror");
name.value = "";
email.value = "";//clear inputs after refresh page
message.value = "";


submit.addEventListener("click",validateInput);
function validateInput() {
    const nameValue = name.value.trim();
    const emailValue = email.value.trim();//clear input value from unneeded whitespaces
    const messageValue = message.value.trim();
    let correctInputs=true; //will submit message only if all inputs are correct

    if (nameValue===""||nameValue===null){  //empty input is not correct
        setErrorFor(name,nameError,"Name cannot be empty."); //if input is incorrect add red border + error message
        correctInputs=false;
    }else{
        unsetErrorFor(name,nameError);//if input is correct remove red border and error message
    }

    if (emailValue===""||emailValue===null){
        setErrorFor(email,emailError,"Email cannot be empty.");
        correctInputs=false;
    }else if (!(emailValue.includes("@"))){//basic email format checker
        setErrorFor(email,emailError,"Incorrect email format.");
        correctInputs=false;
    }else{
        unsetErrorFor(email,emailError)
    }

    if (messageValue===""||messageValue===null){
        setErrorFor(message,messageError,"Comment cannot be empty.");
        correctInputs=false;
    }else{
        unsetErrorFor(message,messageError);
    }
    if(correctInputs){
        document.getElementById("thanksbg").classList.remove("hide");//display window with information that message is sent
        document.getElementById("thanks").innerHTML="Thank you "+ nameValue + "!\nYour message have been sent."
        name.value = "";
        email.value = "";//clear inputs after message sent
        message.value = "";
    }
}

function setErrorFor(input,messageHolder,message) {
    input.classList.add("fail");
    messageHolder.style.visibility="visible";
    messageHolder.innerHTML=message;
}
function unsetErrorFor(input,messageHolder) {
    input.classList.remove("fail");
    messageHolder.style.visibility="hidden";
}
const okbtn = document.getElementById("okbtn");
okbtn.addEventListener("click",function () {//removes window with information that message is sent
    document.getElementById("thanksbg").classList.add("hide");

});

/////////////////////////CHAT////////////////////////////////////////////////////////////////////

const startChatBtn = document.getElementById("introducebtn");
startChatBtn.addEventListener("click", startIntroduction);
const chati = document.getElementById("chati");
const chatd = document.getElementById("chatd");
const removebtn = document.getElementById("inbtn");


function startIntroduction() {
    console.log("imhere");
    let delay = 2000;
    removebtn.classList.add("hide");

    setTimeout(function() { //delay code execution inside {} for 2000ms
        chati.classList.remove("hide");//display 1st cloud with chat
        setTimeout(function() {
            chati.classList.add("hide");//hide 1st cloud with chat
            chatd.classList.remove("hide");//display 2nd cloud with chat
            setTimeout(function() {
                chatd.classList.add("hide");//hide 2nd cloud with chat
                document.getElementById("aboutdesc").classList.remove("hide");//display container with descripton
                document.getElementById("aboutdesc").classList.add("showslow");// add animation to this container

            }, delay);
        }, delay);
    }, delay - 1800);

};
////////////////////////////////////////////////////////////////////////////////////
评论