在js中獲取頁面元素的屬性值時,弱類型導致的詭異事件踩坑記錄,

前幾天寫一個js的時候遇到一個非常詭異的事情,這個問題是這樣的,我要獲取一個頁面的DOM元素的val值,判斷這個值是否比某個變數大,這個需求原先數字最大也就是10,現在要改了,可能會更多,這個時候我發現比較大小的判斷就出了問題:

代碼粘出來:

 1 // js弱類型導致的詭異現象,11 > 9  false
 2   function downtest(id){// 現象是當val取到的元素val值是11的時候,11>9結果是false
 3     // 當前點擊下一題的是第幾題,
 4     var val=$("#"+id).attr("val");
 5     var valint = parseInt(val);// 如果不把這個變數手動轉成數字,當val大於等於10的時候(小於10的時候當做是數字)js就會把它作為一個字元串處理,弱類型語言導致的
 6     // 如果當前這個題號比已答題數大的話,就讓已答數量變成當前題號
 7     console.log('valint: '+valint+'num: '+num+(valint>num));
 8     console.log(valint+num);
 9     if (valint>num) {
10         document.getElementById("numbers").innerText=valint;
11         num=valint;
12     }else{
13         document.getElementById("numbers").innerText=num;
14     }
15     var div = $("#"+id);
16     var n = div.next(); //後一個兄弟
17     div.hide();
18     n.show();
19     a++    
20 }

當獲取到的這個值為11的時候(第四行),被比較的變數是9,按理說11>9的結果應該是true吧,但是列印出來的log顯示是false.....我後來查了查資料,自己總結一下,發現如果當獲取到的屬性值超過或等於10,js就會把這個變數視為字元串處理,而不是在比較時作為數字,

解決的辦法就是手動轉換為數字(第五行),這個時候再列印出來就是正確的數字對比結果了,比較小的一個小坑吧,記錄一下