Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

bootstrap button with error in adding simple onclick event and javascript function

I have the following bootstrap button in a nav bar.

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

The corresponding javascript function (placed beneath it) is:

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

I know how to call a function from a button, for instance the following would work:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

but in this case the error is to do with the additional existing code I had in and I wasn't sure of the syntax.

For this snippet of code:

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

DO I have to remove button type="button" and directly code ? I have tried a few things but keep getting an error.

For instance, I tried this, with no desired result,also doing this removes the bootstrap styling as I removed the class information.

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

The whole code in context, if useful is below. This shows the nav bar and you'll note the login button toward the bottom with the script for the loginfunction onclick event underneath the button html.

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

I want it to remain a bootstrap button with the class style, so need to keep the:

<button type="button"

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Figured it out:

Had an error in the script (window.alert not windowalert)

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

And I was missing a semicolon ...

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

The positioning of the JavaScript did not matter that is it could be above or before the button and it still worked.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...