JS删除class显示无不起作用

Question

I have a strange problem with a "remove" class in JS. I have a div with the style "display: none" and when I click a button I want to remove that class, my JS works for one second, I mean, I see the div and after that, it disappears again. I leave here the codepen link with the code.

<div class="container">
    <div class="col-4 offset-4 text-center">
        <h2>My to-do list</h2>
    </div>
</div>

<div class="container" id="signin-form">
    <div class="col-6 offset-3 align-self-center mt-2">
        <h3 class="text-center">Sign in form</h3>
        <form>
            <div class="mb-3">
                <label for="inputEmail" class="form-label">Email address</label>
                <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp">
            </div>
            <div class="mb-3">
                <label for="inputPwd" class="form-label">Password</label>
                <input type="password" class="form-control" id="inputPwd">
            </div>
            <div class="row mt-4" style="text-align: center;">
                <div class="col-6">
                    <button id="login" class="btn btn-outline-primary">Login</button>
                </div>
                <div class="col-6">
                    <button id="signUp" class="btn btn-outline-success">Sign up</button>
                </div>
            </div>
            <p class="mt-4 mb-4 small">If you already have an account please fill in the form and press "Login" otherwise press "Sign up"</p>
        </form>
    </div>
</div>

<div class="container noShow" id="register-form">
    <div class="col-6 offset-3 align-self-center mt-2">
        <h3 class="text-center ">Form for new user's registration</h3>
        <form>
            <div class="mb-3">
                <label for="name " class="form-label ">Name (*)</label>
                <input type="text " class="form-control " id="newName" required>
            </div>
            <div class="mb-3">
                <label for="surname " class="form-label ">Surname</label>
                <input type="text " class="form-control " id="newSurname">
            </div>
            <div class="mb-3">
                <label for="inputEmail " class="form-label ">Email address (*)</label>
                <input type="email " class="form-control " id="newEmail" aria-describedby="emailHelp " required>
            </div>
            <div class="mb-3">
                <label for="inputPwd " class="form-label ">Password (*)</label>
                <input type="text " class="form-control " id="newPwd" required>
            </div>
            <div class="row mt-4" style="text-align: center;">
                <div class="col-4 offset-4 ">
                    <button type="submit " id="save" class="btn btn-outline-success ">Save</button>
                </div>
            </div>
            <p class="mt-4 mb-4 small ">(*) Field are required</p>
        </form>
    </div>
</div>

https://codepen.io/dome68/pen/wWLzpE

Thanks.

Answer 1

Add e.preventDefault() to your event handler to prevent re-loading of the page post form submission like so:-

function signUpFn(e) {
    e.preventDefault();
    document.getElementById("register-form").classList.remove("noShow");
    document.getElementById("signin-form").classList.add("noShow");
}

Answer 2

The step to remove the class did work. That's why you see it works for one second .

The problem is that the button submits the form later, that's why you see it disappears again .

submit is the default value of type of a <button> associated with a <form> if the attribute is not specified.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

To fix that, assign a type="button" attribute to your Sign Up button which makes it a normal button that will not submit the form.

<button type="button" id="signUp" class="btn btn-outline-success">Sign up</button>