Javascript to modify CSS not working in IE

Question

I'm a bit of a novice when it comes to Javascript, but I've managed to create this script which 'greys out' text and inputs found in a div. It accepts a boolean (show) to declare whether the elements are being hidden or reshown, as well as the name of the div(s) to hide.

It works exactly as intended in Chrome and Firefox, but IE won't do a thing. Through 'debugging' using alerts, I think the issue lies with this line:

var div = document.getElementsByName(divName);

...of the following code:

function hideAndShow(show, divName) {
        var hideColor = "#DFDFDF";

        // Find all matching divs and loop through
        var div = document.getElementsByName(divName);

        for (var count1 = 0; count1 < div.length; count1++) {

            // Find and loop through all elements in div
            var elements = div[count1].getElementsByTagName("*");

            for (var count2 = 0; count2 < elements.length; count2++) {
                if (elements[count2].tagName == "TEXTAREA" || elements[count2].tagName == "INPUT") {
                    elements[count2].disabled = !show; //Disable
                    elements[count2].style.borderColor = (show) ? "" : hideColor; // Change border colour
                    elements[count2].value = ""; //Clear existing text
                }
            }
            // Change the colour of anything left, such as text
            div[count1].style.color = (show) ? "" : hideColor;
            alert(div[count1].id);
        }
    }

Can anybody please help or point me in the right direction? I'm stumped!

Well it's not entirely clear what's going on because you did not post the HTML, but "name" is not a valid attribute for <div> elements. Maybe IE (if it supports "getElementsByName()" at all) doesn't like that, and maybe it only works for element types that actually can have a "name" attribute. — Pointy
– Pointy, Commented Jan 19, 2011 at 16:15
@dorkitude points out correctly that IE is pretty goofy about the "id" and "name" attributes, and sometimes treats them as if they have the same meaning. — Pointy
– Pointy, Commented Jan 19, 2011 at 16:18
Thanks Evan, I think you might be right but as I've almost got it working I'll try and correct this version first. — Jonathan
– Jonathan, Commented Jan 19, 2011 at 16:19
Thank you pointy, I think this most definitely is the problem. I can of course modify the script to look for a DIV ID, but due to the requirement for IDs to be unique I wouldn't be able to refer to multiple DIVs at the same time with one reference. Do you have any suggestions on how I could instead do this? — Jonathan
– Jonathan, Commented Jan 19, 2011 at 16:21

Kyle Wild · Accepted Answer · 2011-01-19 16:16:53Z

2

It's possible that IE is getting confused by your page: http://www.romantika.name/v2/javascripts-getelementsbyname-ie-vs-firefox/

answered Jan 19, 2011 at 16:16

Kyle Wild

8,9252 gold badges39 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pointy Over a year ago

I suspect that it's something like this too.

fearofawhackplanet · Accepted Answer · 2011-01-19 16:27:22Z

1

afaik the IE implementation of getElementsByName actually searches on id

In IE7 at least:

// works in IE but not Chrome
<div id="test"></div>
alert(document.getElementsByName('test').length);

// doesn't work in IE, works in Chrome
<div name="test"></div>
alert(document.getElementsByName('test').length);

Libraries like jQuery deal with all this nonsense for you and make selecting DOM elements trivial.

If you want to do it in pure JS, you might want to look at providing an implementation of getElementsByClassName (see here for an example) to solve the problem.

edited Jan 19, 2011 at 16:27

answered Jan 19, 2011 at 16:20

fearofawhackplanet

53.6k55 gold badges167 silver badges258 bronze badges

2 Comments

Jonathan Over a year ago

Thank you for your reply. Javascript really does seem the long way of going about this so I've decided to bite the bullet and try to learn JQuery. Can I ask, what is the best way to pass my argument if I can't use the 'name' attribute and I can't have the same ID on multiple DIVs?

fearofawhackplanet Over a year ago

I would suggest giving the elements a css class and implementing getElementsByClassName as linked in the answer (so you pass divClass instead of divName to your function). Again, this kind of stuff is sooo easy in jQuery.

Collectives™ on Stack Overflow

Javascript to modify CSS not working in IE

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related