innerHTML和value打架了?

我在实现简单的前端判断验证码的过程中犯了一个低级的错误,这个错误是我平时注意的不多的地方,那就是没有区分清楚innerHTML和value的区别。。。。

现在我对这两者做出简单的区分:

innerHTML操作非表单元素的内容或文本内容,如div等;不能用于表单元素,例如:input;

value是表单元素的特有属性。非表单元素没有value属性,如div,span等;

因为我最开始没有区分二者区别,出现了如下错误:

var ranDom = document.getElementById("random").value; 

var ranDomBox = document.getElementById("randomBox").value;
由此引发的后面的代码无法正确执行!
if (ranDomBox == ranDom)
    {
        document.getElementById("inform").innerHTML = '验证码正确';
        return true;
    }
<input id="randomBox" type="text" name="randomBox">
<div id="random" align="center"></div>

因为前面没有区分清楚二者区别,都使用value获取值,导致id="random"的值无法正确获取,并且浏览器不报错!

后面改正js错误后:

var ranDom = document.getElementById("random").innerHTML;
var ranDomBox = document.getElementById("randomBox").value;

代码功能实现!

原文地址:https://www.cnblogs.com/bokemoqi/p/13675984.html