前几天写一个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. Binary Tree Inorder/Preorder Traversal 返回中序和前序/遍历二叉树的元素集合

    给定一个二叉树,以集合方式返回其中序/先序方式遍历的所有元素. 有两种方法,一种是经典的中序/先序方式的经典递归方式,另一种可以结合栈来实现非递归 Given a binary tree, retur ...

  2. AdvStringGrid使用小结

    结合最近自己做的一些工作,用到了第三方控件AdvStringGrid,这里就常用的一些技巧做个小小的总结 (1)如何设置表格固定的列数,如下图所示: 这里固定的列数为3列,通过设置下面属性来改变固定的 ...

  3. 爬虫IP被禁的简单解决方法——切换UserAgent

    [转载]Python爬虫之UserAgent 用到的库 https://github.com/hellysmile/fake-useragent

  4. Effective C++(4) 确定对象被使用前已先被初始化

    危害:读取未初始化的值会导致不明确甚至是半随机化的行为. 最佳处理办法:永远在使用对象之前先将它初始化:确保每一个构造函数都将对象的每一个成员初始化. 1 注意区分赋值和初始化: 从初始化的角度而言, ...

  5. Centos7 下编译 Openjdk8

    本文主要介绍如何在 Centos7 下编译 Openjdk8 源码,<深入理解java虚拟机>第二版网上好多 openjdk7 的帖子,编译 jdk8 和 7 还是有些差别的,比如大家经常 ...

  6. RESTful的理解与设计【PHP】

    RESTful 就是一种软件架构的风格,以资源为中心定位,运用http的请求方式(动词)来划定操作.这样的设定优点简单易理解,方便人员对接,形成规范. 资源作为唯一标识,使用相关动词取获取操作.举例, ...

  7. Xcode 下载地址 与Macos版本要求

    Xcode下载地址:https://developer.apple.com/download/more/ 参考文档:https://zh.wikipedia.org/wiki/Xcode

  8. java String 常用方法集合

    String a = "abc";String b = "abc";a==b ;//返回true,因为a,b指向的是同一个地址 String a = new S ...

  9. angular cli

    1. 安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 2. 安装angular/cli: cnpm ins ...

  10. [HEOI2012]朋友圈

    题目 我们发现我们要求的是一个最大团问题,众所周知这是一个\(NP\)难问题,除了爆搜没有什么别的方法,但是这道题我们可以根据图的特殊性质入手 我们如果把\(B\)国的人分成奇数和偶数两类,就会发现奇 ...