Performing mathematical operations on attribute value

I am attempting to perform mathematical operations with JavaScript on values obtained from an attribute. The attribute is created via a PHP loop. I will give an example of one of the html tags containing the attributes, but keep in mind that there are many of these tags which contain unique attribute values.

The HTML:

<a href="secondary_imgs.php..." mwidth="593"></a>

The Ja开发者_开发百科vaScript(jQuery):

    $("a[href^='secondary_imgs.php']").click(function(){
        var pageWidth = $(window).width();
        var maxshadowWidth = (Math.floor(pageWidth * 0.91808874)) - 2;
        var mWidth = $(this).attr("mwidth");
        var maxSecondaryWidth = mWidth + 60;
        alert (maxSecondaryWidth);
        if(maxSecondaryWidth <= maxshadowWidth) {
            var shadowWidth = maxSecondaryWidth;
        } else {
            var shadowWidth = maxshadowWidth;
        }
        var shadowboxrel = 'shadowbox;width=' + shadowWidth;
        $(this).attr('rel', shadowboxrel);

The operation doesn't seem to be working, and I have a feeling it has to do with my lack of experience using mathematical operations in javascript. In this case, I think something is wrong with my method of using the attribute value, in the mathematical operation.

For example, the above width attribute is defined as 593. I define the maxSecondaryWidth as mWidth + 60. I fired an alert to see what value I was getting. It should have been shown as 653, yet the value that is 'alerted' is 59360. Obviously I don't understand how to add, as the + is concatenating the two values, as opposed to adding them together. Could it have to do with needing to transform the attribute value from a string into an integer?

---

You have to convert to a number using parseInt(), otherwise + will do string concatenation:

var mWidth = parseInt($(this).attr("mwidth"), 10);

If the attribute can also be a float, use parseFloat() instead of parseInt().

---

Do this to make sure mwidth is a number:

var mWidth = parseInt($(this).attr("mwidth"), 10);

Otherwise, + will perform a string concatenation. Alternatively, if you need mwidth to be a floating point number, do this:

var mWidth = parseFloat($(this).attr("mwidth"));

---

You can do a couple things:

parseInt(mWidth, 10); // int
parseFloat(mWidth); // float
Number(mWidth); // number

otherwise javascript will believe it's a string.

Some less common conversions:

mWidth | 0; // int (javascript bitwise operations are 32-bit signed intergers)
+mWidth; // force Number

---

i think that you must do something safer (as it is always better); You should check if it is a number or not: DOM:

<a href="secondary_imgs.php..." mwidth="593"></a>
<a href="secondary_imgs.php..." mwidth="93"></a>
<a href="secondary_imgs.php..." mwidth="ze"></a>
<a href="secondary_imgs.php..." mwidth="5d93"></a>
<a href="secondary_imgs.php..." mwidth="593"></a>
<a href="secondary_imgs.php..." mwidth="593"></a>

JS:

$("a[mwidth]").each(function(){
    var $attr = $(this).attr('mwidth');
    if(!isNaN($attr)){
        sum += (parseInt($attr));
    }
});

If you remove the condition the results will be NaN

Take a look at : http://jsfiddle.net/zVwYB/