我在实现简单的前端判断验证码的过程中犯了一个低级的错误,这个错误是我平时注意的不多的地方,那就是没有区分清楚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;

代码功能实现!

innerHTML和value打架了?的更多相关文章

  1. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  2. innerHTML和innerText的区别

    以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...

  3. textarea 中的 innerHTML 和 value

    <textarea></textarea> <input type="button" value="click" /> &l ...

  4. innerHTML on ie6-9

    https://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx The innerHTML property is read-only on ...

  5. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  6. innerHTML与innerText的异同

    在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...

  7. c#使用正则表达式抓取a标签的链接和innerhtml

    //读取网页html string text = File.ReadAllText(Environment.CurrentDirectory + "//test.txt", Enc ...

  8. innerHTML 与 innerText 的区别

    innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...

  9. html()、text()、val()、innerHTML、value()的区分

    以上的方法可用于一般的html标签(div)与input中分别进行讨论 1.html(): jQuery方法,用于一般标签中,可读写,可以获得写入html标签. 2.text(): jQuery方法, ...

  10. innerHTML、innerText、outerHTML、outerText的区别

    我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...

随机推荐

  1. C#/.NET/.NET Core技术前沿周刊 | 第 30 期(2025年3.10-3.16)

    前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...

  2. 基础指令:grep、wc、管道符( | )、head、tail、less、more、sort、uniq、Linux软件安装、重定向及

    目录 3.0 dd读取.转换并输出数据 3.1 压缩 (tar.zip).解压缩(tar xf.unzip) 3.2 ln软硬链接 3.2.1 软链接: 3.2.2 硬链接: 3.3 find文件查找 ...

  3. Liunx配置sudo使oracle用户有root权限执行脚本

    1. vi /etc/sudoers 将%wheel 两行前的注释# 删除 2.  vi /etc/group 将oracle用户 加入 wheel组

  4. Docker镜像介绍

    一.Docker镜像介绍 镜像是Docker的三大核心概念之一. Docker运行容器前需要本地存在对应的镜像,如果镜像不存在本地,Docker会尝试先从默认的镜像仓库下载(默认使用Docker Hu ...

  5. 【docker】如何将服务器加入集群,成为子节点

    需求:将服务器加入集群,成为集群中的图一.png (18.95 KB, 下载次数: 0) 图一 图二.png (10.92 KB, 下载次数: 0) 图二 图三.png (26.71 KB, 下载次数 ...

  6. apisix~key-auth多消费的使用

    在 APISIX 中使用 key-auth 插件实现基于密钥的认证,以下是详细的配置步骤,包括如何保存密钥和证书,以及如何将这些信息分配给客户端 A 和 B. 场景说明 服务 C 是后端服务,需要通过 ...

  7. java的反射是要先实例化的!

    java两种获得反射的方法 ,一种是Class.forName("A"); 另一种是 A a = new A(); a.getClass(); 第二种是自己实例化之后,我们在类的静 ...

  8. java学习-8【EnumMap】

    EnumMap和EnumSet几乎是一样的,区别时EnumMap的key时Enum. public enum Types { RED,GREEN,BLACK,YELLO } @Test public ...

  9. sql server2005的阻塞和死锁

    检查死锁及阻塞也可参考: sys.sysprocesses 能显示会话进程有多少, 等待时间, open_tran有多少事务, 阻塞会话是多少. 整体内容更为详细. 关键字段说明: spid 会话ID ...

  10. FMM4在XE下使用

    在project中增加 {$IFDEF DEBUG} ReportMemoryLeaksOnShutdown := True; {$ENDIF} 即可得到提示,如果内存有泄漏的话.但是想进一步仔细使用 ...