我的问题正如标题所见，点击一次无效，再点一次就好了。
这是我原来的代码：
<div class="login-form">
<p>New user?<a href="register.html">Register here!</a></p>
<form>
<div class="form-text">
<input type="text" id="username" class="text" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'USERNAME';}" >
<input type="password" id="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
</div>
<input type="submit" id="submit" value="登录" >
</form>
</div>这是我修改后的代码：
<div class="login-form">
<p>New user?<a href="register.html">Register here!</a></p>
<div class="form-text">
<input type="text" id="username" class="text" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'USERNAME';}" >
<input type="password" id="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
</div>
<input type="submit" id="submit" value="登录" >
</div>可以看到，我把form标签删了。
产生这个问题的原因是：我们点击登录后，form会默认提交表单，服务器响应后会刷新页面，根本就没有执行我们写的 JavaScript 代码。
如果页面中有一些初始化的 JavaScript 代码或者事件绑定逻辑依赖于页面加载完成后执行，而第一次点击提交时，这些逻辑还未完全准备好，就可能导致第一次点击无效。第二次点击时，页面已经完成了初始化，所以点击有效。
这个结论从下面的例子也能证明：
就是我先故意没写用户名和密码提交一次，提交这一次后，下一次再提交就是有效的。原因其实就是我们故意提交的那次错误，页面完成了初始化。
还有，如果我们提交了一次，以后无论提交多少次都行，这也能证明了是因为没有初始化而导致我们第一次提交没有效果。
结论：form标签的锅，以后使用的时候要多加小心。