前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发现比较大小的判断就出了问题:

代码粘出来:

 // js弱类型导致的诡异现象,11 > 9  false
function downtest(id){// 现象是当val取到的元素val值是11的时候,11>9结果是false
// 当前点击下一题的是第几题,
var val=$("#"+id).attr("val");
var valint = parseInt(val);// 如果不把这个变量手动转成数字,当val大于等于10的时候(小于10的时候当做是数字)js就会把它作为一个字符串处理,弱类型语言导致的
// 如果当前这个题号比已答题数大的话,就让已答数量变成当前题号
console.log('valint: '+valint+'num: '+num+(valint>num));
console.log(valint+num);
if (valint>num) {
document.getElementById("numbers").innerText=valint;
num=valint;
}else{
document.getElementById("numbers").innerText=num;
}
var div = $("#"+id);
var n = div.next(); //后一个兄弟
div.hide();
n.show();
a++
}

当获取到的这个值为11的时候(第四行),被比较的变量是9,按理说11>9的结果应该是true吧,但是打印出来的log显示是false.....我后来查了查资料,自己总结一下,发现如果当获取到的属性值超过或等于10,js就会把这个变量视为字符串处理,而不是在比较时作为数字,

解决的办法就是手动转换为数字(第五行),这个时候再打印出来就是正确的数字对比结果了,比较小的一个小坑吧,记录一下

在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,的更多相关文章

  1. js中获取页面元素节点的几种方式

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. jQuery 获取页面元素的属性值

    获取浏览器显示区域(可视区域)的高度 :    $(window).height();    获取浏览器显示区域(可视区域)的宽度 : $(window).width();    获取页面的文档高度 ...

  3. 示例 - 10行代码在C#中获取页面元素布局信息

    最近研究一个如何在网页定位验证码并截图的问题时, 用SS写了一段C#小脚本可以轻松获取页面任意元素的布局信息 (top, left, width, height). 10行功能代码, 觉得有点用, 现 ...

  4. 第二十课:js中如何操作元素的属性系统

    本章的内容有点复杂,我将用简单的方式来介绍重要的东西,不重要的东西,这里就不讲了,讲了也毛用. 通常我们把对象的非函数成员叫做属性.对元素节点来说,其属性大题分为两大类,固有属性和自定义属性.固有属性 ...

  5. JS中获取页面单选框radio和复选框checkbox中当前选中的值

    单选框:单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意< ...

  6. 关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)

    三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...

  7. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  8. Js中获取对象的所有key值

    假如现在有一个对象 var obj = { A:2 ,B:"Ray" ,C:true ,D:function(){} } 如果想遍历对象obj中的所有键值,一般是用以下方式 for ...

  9. js中改变不同的div属性值的操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 阿里,百度,腾讯招聘 Java 程序员的技术标准

    阿里巴巴篇 扎实的计算机专业基础,包括算法和数据结构,操作系统,计算机网络,计算机体系结构,数据库等 具有扎实的Java编程基础,理解IO.多线程等基础框架 熟练使用Linux系统的常用命令及shel ...

  2. spring单元测试报错:Failed to load ApplicationContext 的解决方法

    使用idea 配置单元测试之后,配置完spring的注解@junit 和@runer 之后 一直报错. 最后发现是默认使用jdk1.8引起的,使用jdk1.7即可.

  3. 数据预处理(Python scikit-learn)

    在机器学习任务中,经常会对数据进行预处理.如尺度变换,标准化,二值化,正规化.至于采用哪种方法更有效,则与数据分布和采用算法有关.不同算法对数据的假设不同,可能需要不同的变换,而且有时无需进行变换,也 ...

  4. 从golang-gin-realworld-example-app项目学写httpapi (八)

    https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/common/unit_test.go 单元测试 ...

  5. 如何提高Ajax性能

    1.适当使用缓存机制 2.使用CDN内容分发来访问Jquery脚本: (1)自己公司架设CDN服务器 (2)使用第三方公司的,比如微软,谷歌等公司的CDN,但有时候不太靠谱 3.JS/CSS文件的打包 ...

  6. Java学习---Excel读写操作

    1.1.1. 简介 Apache POI 使用Apache POI 完成Excel读写操作 Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API ...

  7. Homebrew 安装 MySQL

    安装 Homebrew brew doctor 确认 brew 在正常工作 brew update 更新包 brew install mysql 安装 MySQL ​ ==> Downloadi ...

  8. win7装postgresql10.4

    第一步: 第二步: 第三步: 第四步: 第五步: 下载地址:https://get.enterprisedb.com/postgresql/postgresql-10.4-1-windows-x64. ...

  9. 简析Chrome和Webkit的渊源

    http://www.3lian.com/edu/2012/05-25/28803.html 互联网的浪潮从未停息,而用以网上冲浪的冲浪板也一直在变得愈加精良.自人们进入互联网时代以来,即已经发生了三 ...

  10. 3504. [CQOI2014]危桥【最大流】

    Description Alice和Bob居住在一个由N座岛屿组成的国家,岛屿被编号为0到N-1.某些岛屿之间有桥相连,桥上的道路是双 向的,但一次只能供一人通行.其中一些桥由于年久失修成为危桥,最多 ...