添加簡單 onclick 事件和 javascript function 時出現錯誤的引導按鈕

Question

我在導航欄中有以下引導按鈕。

<button type="button" onclick="loginfunction()" class="btn btn-secondary">Login</button>

對應的 javascript function（放在它下面）是：

<script>
function loginfunction() {
  windowalert("Login functionality is under development.");
}
</script>

我知道如何從按鈕調用 function，例如以下操作：

<!DOCTYPE html>
<html>
<body>

<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>

但在這種情況下，錯誤與我擁有的其他現有代碼有關，我不確定語法。

對於這段代碼：

  <button type="button" onclick="loginfunction()" class="btn btn-secondary">Login</button>

我必須刪除按鈕類型=“按鈕”並直接編碼嗎？ 我已經嘗試了一些事情，但不斷收到錯誤。

例如，我嘗試了這個，沒有想要的結果，這樣做也刪除了引導樣式，因為我刪除了 class 信息。

<button type="onclick"=loginfunction() class="btn btn-secondary">Login</button>

上下文中的整個代碼（如果有用的話）如下。 這顯示了導航欄，您會注意到底部的登錄按鈕以及按鈕 html 下方的登錄函數onclick 事件的腳本。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><Vsiteclass="tk"></VSite></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About us</a>
        </li>f
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
         <li class="nav-item">
          <a class="nav-link" href="#">Symptom checker</a>
        </li>
      </ul>

      <span class="navbar-text">
        <button type="onclick"=loginfunction() class="btn btn-secondary">Login</button>

<script>
function loginfunction() {
  windowalert("Login functionality is under development.");
}
</script>
        <button type="button" class="btn btn-danger">Signup</button>
      </span>
    </div>
  </div>
</nav>

我希望它保持為 class 樣式的引導按鈕，因此需要保留：

<button type="button"

Answer 1

弄清楚了：

腳本中有錯誤（window.alert 不是 windowalert）

<script>
function loginfunction() {
  window.alert("Login functionality is under development.");
}
</script>

我錯過了一個分號......

<button type="button" onclick="loginfunction();" class="btn btn-secondary">Login</button>

JavaScript 的位置無關緊要，它可以在按鈕上方或之前，它仍然可以工作。

添加簡單 onclick 事件和 javascript function 時出現錯誤的引導按鈕

問題描述

1 個解決方案

解決方案1
1 2021-01-07 11:57:17

添加簡單 onclick 事件和 javascript function 時出現錯誤的引導按鈕

問題描述

1 個解決方案

解決方案1 1 2021-01-07 11:57:17

解決方案1
1 2021-01-07 11:57:17