Question

我试图制作按钮（使用引导程序），它调用javascript函数。我做了这个：

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

它显示按钮，但是当我点击时，没有任何反应。请帮忙。

Answer 1

假设您的inputUsername和inputPassword是输入字段，请尝试以下操作：

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

通过addEventListener添加功能，而不是使用按钮上的onclick属性。

Answer 2

输入标记没有innerHTML，他们有value：

演示

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

HTML + JS：按钮onclick无法正常工作

2 个答案:

演示