getElementsByTagName in IE issues

[galvin]

This code runs onClick of a certain div element.  The first nine lines wipe out any previously "red" divs and the last line makes the border of the clicked element red.

 

It's working in Chrome/Firefox,  but not in IE.  Everything I researched says that "getElementsByTagName" is supported by IE, so I'm not sure why this code won't work in IE. 

 

Does anyone see any problems with it?

 

 

var boxes = document.getElementsByTagName('div'); //get all elements with div tag

if (boxes) //check elements with div tags were found
{
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].style.border == '1px solid red') {
boxes[i].style.border = 'none';
}
}
}

document.getElementById('box'+val).style.border = '1px solid red';  //

 

 

[.josh]

problem is not getElementsByTagName it's your style.border condition that is failing.  You need to look at how IE's DOM stores css properties.

[galvin]

IE DOES make the border red when you click, it just doesn't remove the red border from the other divs.  So I think that means my code setting the border to "none" is what's failing.  And I don't think there is any other way to specify no border other than using "none".

 

I'm probably misunderstanding what you're saying tho

 

I'll keep researching.  Thanks for the feedback...

[.josh]

if (boxes[i].style.border == '1px solid red') {

 

you are checking if style.border is '1px solid red' but that's not how IE stores the border property.  Use IE web developer, inspect the element.

[galvin]

Gotcha.  Found that Chrome/Firefox store it as "1px solid red" while IE stores it as "red solid 1px".  So I just changed this line...

if (boxes[i].style.border == '1px solid red') {

...to be...

if (boxes[i].style.border == "red solid 1px" || '1px solid red') {

 

...and it seems to work in all browsers now.

 

Had no idea they stored that CSS differently.  Thank you very much Crayon for pointing me in the right direction!

[.josh]

Instead of trying to pick apart different browser DOM structures, I suggest you instead do something like this:

 

<style type='text/css'>
.redBox { border: 1px solid red; margin-bottom: 5px;}
.clearBox { border: none; margin-bottom: 5px;}
</style>

<div id='box1' class='redBox' onclick='makeRed(1)'>something</div>
<div id='box2' class='redBox' onclick='makeRed(2)'>something</div>
<div id='box3' class='redBox' onclick='makeRed(3)'>something</div>
<div id='box4' class='redBox' onclick='makeRed(4)'>something</div>
<div id='box5' class='redBox' onclick='makeRed(5)'>something</div>

<script type='text/javascript'>
function makeRed(val) {

  var classNode = (navigator.appName.indexOf('Microsoft')>-1)?'className':'class'; 
  var boxes = document.getElementsByTagName('div'); //get all elements with div tag

  if (boxes) { 
    for (var i = 0; i < boxes.length; i++) {

      if (boxes[i].getAttribute(classNode)=='redBox') {
        boxes[i].setAttribute(classNode,'clearBox');
      }
    }
  }
  document.getElementById('box'+val).setAttribute(classNode,'redBox');  //
}
</script>

 

Basically you have two css classes, one that sets the border and one that clears it.  And instead of trying to retrieve and look at border values, check and change css classes and let the browser figure out the details.  But even then, as you can see in the code, I still have to do it based on browser...welcome to the woes of cross-browser compatibility.

 

I highly suggest you learn and use jQuery or similar js framework, as it super helps in abstracting away the worries of having to do things differently for different browsers.

[galvin]

Awesome, thanks so much for the knowledge!!