开发者

My first script works! - except for IE and Safari - please help

Hey all, I'm trying to teach myself Javascript. The following is my first script so bear with me if there are some "rookie" mistakes. :)

It works in FF and Chrome, but not in IE or Safari.

JSLint won't process past the for loop.

IE debugger is giving me an Invalid argument error on the line(#37):

document.get开发者_开发百科ElementById(progBarId).style.width = barWidth + 'px';

I've confirmed that the barWidth variable is a number.

I've Googled IE issues with my syntax and came up empty.

Any help is greatly appreciated. Thanks.

window.onload = upDtProgBars;

function upDtProgBars() {
    var allTags = document.getElementsByTagName("div");

    for (var i = 0; i < allTags.length; i++) {
        if (allTags[i].className.indexOf("progBar") > -1) {
            progBarId = setProgBarWidth(allTags[i].id);
        }
        // END if
    }
    // END for loop
    function setProgBarWidth(progBarId) {
        var today = new Date();
        var startDate;
        var numWeeks;
        var barWidth = 0;
        var progBarID = "";
        switch (progBarId) {
        case "html":
            startDate = new Date('5,1,2009')
            break;
        case "html5":
            startDate = new Date()
            break;
        case "js":
            startDate = new Date('1, 1, 2011')
            break;
        case "csharp":
            startDate = new Date('9,3, 2010')
            break;
        default:
        }
        // END Switch
        if (progBarId != "") {
            numWeeks = getNumWeeks(today, startDate);
            barWidth = parseInt(numWeeks * 2.76);
            document.getElementById(progBarId).style.width = barWidth + 'px';
        }
        // END if not empty string
    }
    // END setProgBarWidth
    function getNumWeeks(d1, d2) {
        var ONE_WEEK = 1000 * 60 * 60 * 24 * 7;
        var diffInWeeks = Math.round(Math.abs(d2.getTime() - d1.getTime())) / ONE_WEEK;
        return diffInWeeks;
    }
    // END getNumWeeks
}
// END upDtProgBars


Your dates are not formatted properly for IE and Safari. This indirectly causes an invalid argument on the line where you set width because of the following example process:

var date = new Date("garbage"); // Invalid date
var time = date.getTime();      // returns NaN from an invalid date
var barWidth = time * 2.76;     // Still NaN

// The following line results in "NaNpx" for the width, which throws an error
document.getElementById(progBarId).style.width = barWidth + 'px'; 

Stick to using multiple arguments; new Date(year, month, date). Example:

    case "csharp":
        startDate = new Date(2010, 8, 3);

Remember that months start with 0 in this case, so 8 is September, not August. Also, don't forget your semi-colons at the end of lines.

  • Date - MDC


I'm not a JavaScript expert and am not sure what is causing the error. But you should pass the object itself rather than just the ID to setProgBarWidth(). Why make your code lookup the same item more than once? That would also rule out any problems related to the ID.


Try to use jquery for DOM manipulation, is much easier and prevents some mistakes.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜