CODEWITHSUNDEEP
javascripthtmltwitter-bootstraptwitter-bootstrap-3
supertrall
supertrall

Reputation: 115

HTML + JS: button onclick not working

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.

Upvotes: 0

Views: 1503

Answers (2)

Nabil Kadimi
Nabil Kadimi

Reputation: 10414

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

Demo

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

Upvotes: 0

van100j
van100j

Reputation: 1017

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.

Upvotes: 1

Related Questions