Onclick html调用JavaScript函数在Safari中不起作用

Question

我试图从html中的onclick事件调用我的javascript文件中的函数。 此代码在Google Chrome浏览器中可以完美运行，但在Safari中不起作用，因为它重定向到同一页面并清空表单，而没有重定向到我网站的主页。

这是我的HTML代码：

<!-- Login or subscribe form-->
  <div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="card text-white p-5 bg-primary signUpBoxStyle">
            <div class="card-body">
              <h1 class="mb-4">Effettua il login o iscriviti</h1>
              <form>
                <div class="form-group"> <label>Indirizzo email</label>
                  <input type="email" class="form-control" placeholder="Inserisci email" id="email"> </div>
                <div class="form-group"> <label>Password</label>
                  <input type="password" class="form-control" placeholder="Password" id="password"> </div>
                <input type="button" class="btn btn-light text-primary btn-sm" value="Accedi" onclick="loginFunction()">
                <input type="button" class="btn btn-light text-primary btn-sm" value="Crea un Account" onclick="signupFunction()">                      </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

这是我的JavaScript

function loginFunction() {
  let email = document.getElementById('email').value;
  let password = document.getElementById('password').value;
  firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
  })
};

Answer 1

您可能需要通过preventDefault()告诉浏览器不要执行该元素的默认行为。 这样的答案给出了更多细节。

Answer 2

使用if语句检查该属性不是可伸缩的，但是可能会将函数调用作为参数传递。

 let buttons = document.querySelectorAll('input[type=button]') buttons.forEach(button => { button.addEventListener('click', e => { let func = e.target.getAttribute('data-call') if (func === 'login') { loginFunction() } else if (func === 'signup') { signupFunction() } }) }) let loginFunction = () => { console.log('loginFunction') } let signupFunction = () => { console.log('signupFunction') } 

 <form> <input type="button" value="Accedi" data-call="login"> <input type="button" value="Crea un Account" data-call="signup"> </form>