HTML + JS: button onclick not working

Question

I'm trying to make button (using bootstrap), which calls javascript function. I made this:

<head>
   <script type="text/javascript">
      function logInClicked() {
      var username = document.getElementById("inputUsername").innerHTML;
      var password = document.getElementById("inputPassword").innerHTML;
      alert(username + ":" + password);
      }
   </script>
</head>

<body>
    <form role="form">
        <div class="form-group" style="width:300px">
            <input type="email" class="form-control" id="inputUsername" placeholder="Username">
        </div>
        <div class="form-group" style="width:300px">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </form>

    <p>
        <button type="button" style="width:148px" class="btn btn-default btn-lg" id="signUpButton" onclick="signUp();">Sign Up</button>
        <button type="button" style="width:148px" class="btn btn-primary btn-lg" id="logInButton" onclick="logInClicked();">Log In</button>
    </p>
</body>

It shows button, but when I click, nothing happens. Please help.

logInClicked() is called. jsfiddle.net/h22eh

nicael
– nicael

2014-05-18 19:03:56 +00:00
Commented May 18, 2014 at 19:03 — nicael
– nicael, Commented May 18, 2014 at 19:03

van100j · Accepted Answer · 2014-05-18 18:54:52Z

1

Assuming your inputUsername and inputPassword are input fields, try the following:

<body>
    <button type="button" style="width:148px" class="btn btn-primary btn-lg" id="logInButton">Log In</button>
<script type="text/javascript">
  function logInClicked() {
      var username = document.getElementById("inputUsername").value;
      var password = document.getElementById("inputPassword").value;
      alert(username + ":" + password);
  }
  document.getElementById('logInButton').addEventListener('click', logInClicked);
</script>
</body>

Functionality added via addEventListener instead of using the onclick attribute on the button.

answered May 18, 2014 at 18:54

van100j

1,0179 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

van100j Over a year ago

Do you have the inputUsername and inputPassword inputs in your HTML? They are missing in the code you provided.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Input tags don't have innerHTML, they have value:

Demo

http://jsfiddle.net/nabil_kadimi/JgDQ6/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 18, 2014 at 18:58

Nabil Kadimi

10.5k2 gold badges56 silver badges60 bronze badges

1 Comment

supertrall Over a year ago

The problem is that function logInClicked() is not calling

Collectives™ on Stack Overflow

HTML + JS: button onclick not working

2 Answers 2

1 Comment

Demo

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Demo

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related