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

    一台有GPU的虚拟机如果没有安装CUDA的驱动,是需要我们手动去进行安装的,介绍Ubuntu操作系统的安装教程. 1. 下载安装文件 NVIDIA CUDA Toolkit Archive 点击上面链 ...

  2. Delphi 判断操作系统是32位或是64位

    function IsWin64: Boolean; var Kernel32Handle: THandle; IsWow64Process: function(Handle: Windows.THa ...

  3. BUUCTF---RSA1

    RSA基础概念 rsa原理: RSA公开密钥密码体制的原理是:根据数论,寻求两个大素数比较简单,而将它们的乘积进行因式分解却极其困难,因此可以将乘积公开作为加密密钥 RSA算法的具体描述如下: (1) ...

  4. 【UWB】DWM1000 室内定位串口协议说明

    UWB室内定位串口协议说明 通过串口发送的测距报告消息有三种: "mr"信息包括标签到锚定原始范围 "mc"标签到锚定范围偏差修正范围 - 用于标签位置 &qu ...

  5. 免费在线试用 200+ Linux 和 Unix 操作系统

    Linux 和 Unix 存在着各种各样的发行版本,有的界面美观,有的功能强大,想要尝试不同的 Linux 和 Unix 操作系统,你可能会烦于进行本地安装.不急,今天,我们来介绍一个强大的服务,Di ...

  6. 使用Python+SymPy求解微分方程

    引言 在学习微积分或者物理.工程相关的学科时,微分方程常常是我们需要解决的一个重要问题.微分方程是包含未知函数及其导数的方程,广泛应用于描述变化过程中的规律,如物理中的运动方程.化学中的反应速率.经济 ...

  7. 🎀OpenTelemetry探针介绍及使用

    简介 OpenTelemetry(简称 Otel)是由 CNCF 主导的云原生可观测性标准框架,用于统一采集.处理和导出分布式系统中的遥测数据(如追踪.指标.日志).其核心目标是通过标准化协议和工具集 ...

  8. Nerf和3DGS神经重建技术在自动驾驶模拟中的应用

    验证自动驾驶软件需要数百万公里的测试.这不仅意味着系统开发周期长,而且系统的复杂度也会不断增加,同时,大规模的实车测试也会耗费巨量的资源并且可能会面临未知的安全问题.aiSim这样的虚拟仿真工具可以减 ...

  9. Cursor怎么使用,3分钟上手Cursor:比ChatGPT更懂需求,用聊天的方式写代码,GPT4、Claude 3.5等先进LLM辅助编程

    前言 在人工智能工具井喷的今天,大家早已习惯用AI辅助编程,但大多数工具要么停留在"问答式"交互,要么对复杂代码逻辑束手无策.而Cursor--这款专为开发者设计的AI编程工具,凭 ...

  10. Python实验2 turtle 库绘制进阶图形

    实验任务: 绘制嵌套彩色五角星(大小逐层递减) 设计函数绘制自定义正多边形(边数与颜色参数化) 扩展:实现动态旋转花瓣图案. 源代码:import turtle 绘制嵌套彩色五角星 def neste ...