www.webdeveloper.com
Results 1 to 4 of 4

Thread: Comparing html5 data-set values produce unpredictable results

  1. #1
    Join Date
    Sep 2012
    Posts
    2

    Comparing html5 data-set values produce unpredictable results

    Hello!

    I have multiple text input fields that accept numbers, and I want to clamp the value within a set range. I have working code to parse the input to make sure it's a valid number, but the problem I'm having is with the code to clamp the resulting number.

    PHP Code:
    <!DOCTYPE html>
    <
    body>
        <
    input id="myField" type="number" value="10" data-max="25" data-min="3"> </input>

        <
    script type="text/javascript">
            var 
    numberField document.getElementById("myField");
            
    numberField.addEventListener("change", function() { onFieldChange(numberField) });
            
            function 
    onFieldChange(obj) {
                if(
    obj.value obj.dataset.minobj.value obj.dataset.min;  //doesn't work right
                //if(obj.value < obj.getAttribute("data-min")) obj.value = obj.getAttribute("data-min");  //same deal
                
                //if(obj.value < 3) obj.value = 3;  //this works as expected
            
    }
        
    </script>
    </body> 
    When I compare the value with the custom data attributes, I get strange results. For example, if I enter "2", it changes to 3 as expected. Any single digit number will work correctly, but "10" will be considered less than 3 here. After some testing, it looks like only the first number of the value is being considered with the if statements. 3456 will remain in the input, as it should, but 23456 will get changed because it starts with 2.

    If I use javascript variables in place of custom attributes, everything seems to be ok, except my code is longer. I'd rather use the custom attributes if I can.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,088
    those attributes are strings. try converting them to numbers:
    Code:
            function onFieldChange(obj) { 
                if(Number(obj.value) < Number(obj.dataset.min)) obj.value = obj.dataset.min;
            }

  3. #3
    Join Date
    Sep 2012
    Posts
    2
    Oh! That works, thank you!

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    or try the shorter-to-type and javascript-parser-unambiguous subtraction form:

    function onFieldChange(obj) {
    if( obj.value - obj.dataset.min < 0 ) obj.value = obj.dataset.min;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles