我的问题正如标题所见，点击一次无效，再点一次就好了。

这是我原来的代码：

<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标签的锅，以后使用的时候要多加小心。