提问者:小点点

Style.MarginLeft函数在JavaScript中不能工作


我正在尝试创建一个多步骤使用HTML用户注册表单。 我已经添加了两个部分,现在当我从javascript引用next按钮时,它可以工作,但是在转换之后返回到第一页。

HTML代码:

            <form>
                <div class="page slidePage ">
                    <div class="field">
                        <div class="label">Username*</div>
                        <input type="text">
                    </div>
                    <div class="field">
                        <div class="label">Firstname*</div>
                        <input type="text">
                    </div>
                    <div class="field">
                        <div class="label">Lastname*</div>
                        <input type="text">
                    </div>
                    <div class="field">
                        <button class="nxt nextBtn-1">Next</button>
                    </div>
                </div>

                <div class="page">
                    <div class="field">
                        <div class="label">Email</div>
                        <input type="text">
                    </div>
                    <div class="field">
                        <div class="label">Password</div>
                        <input type="text">
                    </div>
                    <div class="field">
                        <div class="label">Password Confirmation</div>
                        <input type="text">
                    </div>
                    <div class="field buttons">
                        <button class="prev-1 prev">Previous</button>
                        <button class="submit">Next</button>
                    </div>
                </div>
            </form>

JavaScript:

const slidePage = document.querySelector(".slidePage");
const first_nextBtn = document.querySelector(".nextBtn-1");
const first_prevBtn = document.querySelector(".prev-1");

first_nextBtn.addEventListener("click", function(){
    slidePage.style.marginLeft = "-25%";
});

first_prevBtn.addEventListener("click", function(){
    slidePage.style.marginLeft = "[enter link description here][1]0%";
});

但这种情况正在发生:[1]:https://youtu.be/xstl6dpl42m


共3个答案

匿名用户

在表单中使用

匿名用户

可以使用“防止默认值”。 它将停止页面以便重新加载。

first_nextBtn.addEventListener("click", function(event){
    event.preventDefault();
    slidePage.style.marginLeft = "-25%";
});

匿名用户

表单刷新页面,您可以使用

<button type="button"></button>

或者使用Event.PreventDefault()