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. http://jsfiddle.net/h22eh/ – nicael May 18 '14 at 19:03 — nicael, May 18 '14 at 19:03

score 1 · Accepted Answer · answered May 18 '14 at 18:54

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.

Do you have the `inputUsername` and `inputPassword` inputs in your HTML? They are missing in the code you provided. — van100j, May 18 '14 at 18:59

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

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

Demo

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 18 '14 at 18:58

Nabil Kadimi

10,078
2
51
58

The problem is that function logInClicked() is not calling – supertrall May 18 '14 at 19:06

HTML + JS: button onclick not working

2 Answers2

Demo