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块放置在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>

Answer 2

您的JavaScript代码应该在<script></script>标记内...而且，也错过了CSS Styles和Font-awesome。

请避免此类问题，确切说明要什么，显示您尝试过的内容，然后只有我们才能提供帮助。不要把链接，并请我们参考:) How to ask good question?

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

2 个答案: