为什么HTML按钮不响应JavaScript重定向?

时间:2016-12-08 06:15:20

标签: javascript html redirect firebase firebase-authentication

我是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

});

我做错了什么?提前谢谢。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

点击提交按钮后,您的JS就会运行。

您将location设置为新值,然后JS完成并且正常表单提交接管并提交表单。

在JS成功时捕获事件对象并阻止按钮的默认行为:

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