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()执行该元素的默认行为。 This SO answer提供更多细节。

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>

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

2 个答案: