Why does attribute value of input = text, but attribute value of li = number?

Question

http://jsfiddle.net/3GTtF/2/

<ul>
    <li class="first" value="45">fortyfive</li>
    <li class="second" value="4text5">45</li>
</ul>

<input value="45">

---

var whatIsValue = $('.first').val();            //  = 45     typeof = number
var whatIsSecondValue = $('.second').val();     //  = 4      typeof = number
var whatIsInputValue = $('input').val();        //  = '45'   typeof = string

Why does var whatIsSecondValue = 4 instead of '4text5'

Why does var whatIsInputValue = '45' instead of 45

Answer 1

As for the WHY i'm not sure but a li tag shouldn't have a value attribute. You should use data-* attribute instead. It is invalid/improper HTML syntax.

As shown below

<ul>
    <li class="first" data-value="45">fortyfive</li>
    <li class="second" data-value="4text5">45</li>
</ul>


var whatIsValue = $('.first').data('value');
var whatIsSecondValue = $('.second').data('value'); // = 4text5 typeof = string
var whatIsInputValue = $('input').val();

Update

Apparently in HTML5 once can use a value attribute, see comments below. In that case to solve this you could use the .prop() or .attr() methods.

Another Update

Because in HTML5 the value attribute on a li is of type integer/number by default. As to why it trims the string to 4, that's a mystery.

Answer 2

If you're gonna use .val() incorrectly, you'll get strange results.

If you're set on using value="" in an li, to access it you must use .attr("value")

see the updated fiddle http://jsfiddle.net/3GTtF/3/