html验证码如何修改成点击验证码区域即可切换？

Question

验证码区域怎么设置可以直接点击即可进行切换？有设定a标签，但是a标签不生效，无法点击切换，同时验证码输入判断没有判断小写字母也可以，只判断了一模一样的才行。留言板块的留言文字部分位置也不是我想要的，我想把“留言：”这个放在输入框的左上方，而不是现在得左下方，不知道为什么复制过来的设定在jsrun上面位置会有偏差，但是不影响。麻烦大佬们帮我看一下如何修改？看效果以及代码的链接在下方！↓↓↓

http://jsrun.net/ifvKp/edit

Answer 1

btn.onclick改成checkCode.onclick，另外没有必要在外面套个a标签啊。

Answer 2

你的代码在本地运行应该是正常的，这是jsrun平台的问题。查看了下源码，右边渲染出来的节点把你包裹在checkCode节点外面的父节点btn丢弃了，你的源码是这样的：

<a href="###" id="btn"><div class="code" id="checkCode"></div></a>

jsrun渲染出的节点是这样的：

所以当你给btn节点绑定点击事件是无效的
如果必须要在jsrun上看效果，那就把你的14-16行js代码改掉：

document.querySelector('#checkCode').onclick = function() {
    yzm.createCode();
}

---

追加部分

看后面有人回复，我试着运行了你的代码，发现还是有问题，主要是html部分的a标签父节点p的问题，你把它换成div就可以了，js不用做任何修改:

<div class="left_yzm">验&nbsp;证&nbsp;&nbsp;码：
    <input class="int_yzm" type="text" placeholder="请输入验证码" id="input">
    <a href="###" id="btn"><div class="code" id="checkCode"></div></a>
</div>

Answer 3

直说吧 .. 研究一下：元素间的嵌套关系
正常的嵌套关系应该是：块级元素（div） > 行级元素（a）
如果期望显示正常应该将 a>div 改成 a>span