为什么 HTML 按钮不响应 JavaScript 重定向？答案

【问题标题】：Why is the HTML button not responding to JavaScript redirect?为什么 HTML 按钮不响应 JavaScript 重定向？
【发布时间】：2016-12-08 06:15:20
【问题描述】：

我是 Web 开发的新手，我正在努力使用 JavaScript 获取登录表单。基本上，我正在尝试将其连接到 Firebase，但甚至在此之前；每次点击登录按钮时，它都会在浏览器 URL 上以文本形式显示电子邮件和密码，并且不会重定向，无论我重定向到哪里。

我尝试重定向到我在同一目录中的另一个 HTML，我尝试了 Google 的主页。无论我使用 JavaScript 做什么，都没有任何效果。

这是我的 HTML

注意：未添加 CSS，因此无法获得外观。

<div class="login-form">
                                 <div class="form-help-text">Looking for the Advertiser Login? <a href="advertiser-Login.html">Click here</a></div>
                                <div class="login-form-container">
                                    <form name="loginForm" class="form-horizontal" role="form" novalidate>
                                        <div class="form-group" show-errors>
                                            <label class="col-sm-4 control-label">Email Address:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <input type="email" class="form-control" name="email" id="email" ng-model="formData.username" required autofocus>
                                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group" show-errors>
                                            <label class="col-sm-4 control-label">Password:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <input type="password" class="form-control" name="password" id="password" ng-model="formData.password" required>
                                                    <span class="input-group-addon"><i class="fa fa-lock"></i></span>                                                
                                                </div>
                                            </div>
                                        </div>
                                        <div>
                                            <button id = "loginEmail" class = "btn btn-lg btn-block btn-wrapify-login">Sign In Email</button>
                                            <!--<button id = "login" class="btn btn-lg btn-wrapify-login btn-block">Sign In </button>-->
                                            <div class="member-login-container">
                                                Not a member yet? <a href="#">Sign Up!</a>
                                            </div>
                                            <div class="divider"><img src="img/button-divider.png" class="img-responsive"></div>
                                            <button class="btn btn-lg btn-fb-login btn-block" <i class="fa fa-facebook-official fa-lg"></i>&nbsp;&nbsp;Sign In With Facebook</button>
                                            <div class="divider"></div>
                                            <div id="google-signin-button"></div>
                                            <p class="text-center m-t-sm"><a href"#"">Forgot Your Password?</a></p>
                                        </div>
                                    </form>
                                </div>
                            </div>

这就是 JavaScript。在 Chrome JS 控制台上检查时似乎一切正常，但我从不重定向到下一页

const textEmail = document.getElementById("email");
const textPword = document.getElementById("password");
const btn = document.getElementById("loginEmail");
// const email = document.getElementById("signup");

btn.addEventListener('click', function(){
    // Get email and passwrd
    const email = textEmail.value;
    const pword = textPword.value;
    const auth = firebase.auth();

    const promise = auth.signInWithEmailAndPassword(email, pword);
    console.log("logging in ");
    promise.catch(function(error){
        console.log(error.message);
    });
    // console.log(promise);
    window.location = "post-login.html";
    //window.location.href = "post-login.html"; //just to see if it makes a difference
    //window.location = "http://www.google.com";//tried this as well
    //window.location.href = "http://www.google.com";//tried this as well

});

我做错了什么？提前致谢。

【问题讨论】：

尝试将method=POST 添加到您的<form>
promise.then(function(error){ window.location.href = "http://www.google.com"; }); ，这可能会取消认证，即您将不再被认证

标签： javascript html redirect firebase firebase-authentication

【解决方案1】：

你可以试试类似：<input type="button" onclick="location.href='http://google.com';" value="Redirect" />

【讨论】：

【解决方案2】：

单击提交按钮时，您的 JS 将运行。

您将location 设置为一个新值，然后JS 完成并接管正常的表单提交并提交表单。

捕获事件对象，防止JS成功时按钮的默认行为：

btn.addEventListener('click', function(ev){
    ...
    ev.preventDefault();
});

【讨论】：