在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,
前几天写一个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中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,的更多相关文章
- js中获取页面元素节点的几种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery 获取页面元素的属性值
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- 示例 - 10行代码在C#中获取页面元素布局信息
最近研究一个如何在网页定位验证码并截图的问题时, 用SS写了一段C#小脚本可以轻松获取页面任意元素的布局信息 (top, left, width, height). 10行功能代码, 觉得有点用, 现 ...
- 第二十课:js中如何操作元素的属性系统
本章的内容有点复杂,我将用简单的方式来介绍重要的东西,不重要的东西,这里就不讲了,讲了也毛用. 通常我们把对象的非函数成员叫做属性.对元素节点来说,其属性大题分为两大类,固有属性和自定义属性.固有属性 ...
- JS中获取页面单选框radio和复选框checkbox中当前选中的值
单选框:单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意< ...
- 关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)
三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- Js中获取对象的所有key值
假如现在有一个对象 var obj = { A:2 ,B:"Ray" ,C:true ,D:function(){} } 如果想遍历对象obj中的所有键值,一般是用以下方式 for ...
- js中改变不同的div属性值的操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- this keyword details
学生类: package com.itheima_07; /* * 学生类 * * 起名字我们要求做到见名知意. * 而我们现在的代码中的n和a就没有做到见名知意,所以我要改进. * * 如果有局部变 ...
- axios 同步问题
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中(这是官方文档给出的一个解释说明) 它的主要作用是向后台发起异步请求,还有在请求中做更多的可控功能 1. ...
- 常见网络编程面试题答案征集与面试题(收集) ZZ 【网络编程】
http://www.cnblogs.com/wickedboy237/archive/2013/05/12/3074362.html 1:tcp和udp的区别2:流量控制和拥塞控制的实现机制3:滑动 ...
- String str = "1,2,3,4,5,6" 如何将这个字符串转换成int数组
String str = "1,2,3,4,5,6"; string[] strS = str.Split(','); int[] num = new int[strS.Lengt ...
- python3.6+GDAL-2.1.3环境配置
1.下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal 2.配置:见上图命令(跟以前相似) 3.测试:
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jq实现多级菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Python的getattr(),setattr(),delattr(),hasattr()及类内建__getattr__应用
@Python的getattr(),setattr(),delattr(),hasattr() 先转一篇博文,参考.最后再给出一个例子 getattr()函数是Python自省的核心函数,具体使用大体 ...
- 以整数元素构成的list中的数字组成最小整数
问题 把一个int型数组中的数字拼成一个串,这个串代表的数字最小. 思路说明 不同角度,对原题理解有所不同.我依照以下的理解方式求解. 对这个问题的理解: 有一个元素是int类型的list: 将上述l ...
- 【[SDOI2013]泉】
\(hash\)+容斥 但是看到这个令人愉快的数据范围还是直接枚举子集吧 首先我们发现\(6\)这个东西简直是小的可怜,复杂度里肯定有\(2^6\)的 于是我们可以直接先枚举子集,把所有状态的对应相等 ...