javascript - 不显示任何错误，但代码不起作用

Question

我正在从 youtube 学习 javascript，我按照讲师的编码进行了编码。但它不一样或代码不工作。

我列出了 html 和 js 代码。谁能告诉我哪里出了问题。

YouTube 链接: https://www.youtube.com/watch?v=wc5k2AMPED0

 <form>
    <div class="field-name">
        <i class="far fa-user"></i>
        <input type="text" placeholder="Username" required="">
        <div id="addhere"></div>
        <i class="fas fa-arrow-down"></i>
    </div>
    <div class="field-email innactive">
        <i class="fal fa-envelope"></i>
        <input type="email" placeholder="Email" required="">
        <i class="fas fa-arrow-down"></i>
    </div>
    <div class="field-password innactive">
        <i class="far fa-user"></i>
        <input type="password" placeholder="Password" required="">
        <i class="fas fa-arrow-down"></i>
    </div>
    <div class="field-finish innactive">
        <i class="far fa-heart"></i>
        <p>Thank you</p>
        <i class="far fa-heart"></i>
    </div>

</form>

function animatedForm(){
const arrows = document.querySelectorAll(".fa-arrow-down");
arrows.forEach(arrow =>{
    arrow.addEventListener("click", () =>{
        const input = arrow.previousElementSibling;
        const parent = arrow.parentElement;
        const nextForm = parent.nextElementSibling;
        if(input.type === "text" && validateUser(input)){
            console.log("everything is okay");
        }
    });

});
}

function validateUser(user){
    if(user.value.length < 6){
        console.log("not enough character");
        error("rgb(189,87,87)");
    }
    else{
        error("rgb(87,87,130)");
        return true;
    }
}


function error(color){
    document.body.style.backgroundColor = color;
}
animatedForm();

控制台没有任何错误:(。

Answer 1

是否应该将 javascript block 放在 script 标记中？

<form>
    <div class="field-name">
        <i class="far fa-user"></i>
        <input type="text" placeholder="Username" required="">
        <div id="addhere"></div>
        <i class="fas fa-arrow-down"></i>
    </div>
    <div class="field-email innactive">
        <i class="fal fa-envelope"></i>
        <input type="email" placeholder="Email" required="">
        <i class="fas fa-arrow-down"></i>
    </div>
    <div class="field-password innactive">
        <i class="far fa-user"></i>
        <input type="password" placeholder="Password" required="">
        <i class="fas fa-arrow-down"></i>
    </div>
    <div class="field-finish innactive">
        <i class="far fa-heart"></i>
        <p>Thank you</p>
        <i class="far fa-heart"></i>
    </div>

</form>

<script>
function animatedForm(){
    const arrows = document.querySelectorAll(".fa-arrow-down");
    arrows.forEach(arrow =>{
        arrow.addEventListener("click", () =>{
            const input = arrow.previousElementSibling;
            const parent = arrow.parentElement;
            const nextForm = parent.nextElementSibling;
            if(input.type === "text" && validateUser(input)){
                nextSlide(parent,nextForm);
            }
        });
    });
}

function validateUser(user){
    if(user.value.length < 6){
        console.log("not enough character");
        error("rgb(189,87,87)");
    }
    else{
        error("rgb(87,87,130)");
        return true;
    }
}

function nextSlide(parent, nextForm){
    parent.classList.add('innactive');
    parent.classList.remove('active');
    nextForm.classList.add('active');
}


function error(color){
    document.body.style.backgroundColor = color;
}
animatedForm();
</script>