JavaScript border-color/color styling not working on mouseover and mouseout

Question

I'd like to style 'input.submit' of a form (hover effect for IE) using JS and tried the following which doesn't work unfortunately.

<!--[if IE]>
<script type="text/javascript">

// CHANGE SUBMIT STYLE
var foo = document.getElementByClass('input.submit');
foo.onmouseover = this.style.border-color='#000000'; this.style.color='#000000';
foo.onmouseout = this.style.border-color='#888888'; this.style.color='#888888';
foo.onclick = this.style.border-color='#000000'; this.style.color='#000000';

</script>
<![endif]-->

How can I fix this so that it works?

Answer 1

The answer is considerably more complicated if the elements are generated by an external javascript script. You'll need to find the element first, so the by id and class approaches won't work unless they already have one - see the type solution below.

Find by id:

The following is preferred, you need to add an id to the input submit e.g. <input type="submit" id="submit"> to reference it by:

// CHANGE SUBMIT STYLE
var foo = document.getElementById('submit');
foo.onmouseover = function() {this.style.borderColor='#000000'; this.style.color='#000000';}
foo.onmouseout = function() {this.style.borderColor='#888888'; this.style.color='#888888';}
foo.onclick = function() {this.style.borderColor='#000000'; this.style.color='#000000';}

but the following should also work:

Find by class:

you'll need to specify a class e.g. <input type="submit" class="submit"> in this case. getElementsByClass doesn't look for the type, it looks for the class.

<script type="text/javascript">

function getElementsByClass(node,searchClass,tag) {
  var classElements = new Array();
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("\b"+searchClass+"\b");
  for (i = 0, j = 0; i < elsLen; i++) {
    if ( pattern.test(els[i].className) ) {
      classElements[j] = els[i];
      j++;
    }
  }
return classElements;
}

// CHANGE SUBMIT STYLE
var foo = getElementsByClass(document.body, 'submit', 'input')[0];
foo.onmouseover = function() {this.style.borderColor='#000000'; this.style.color='#000000';}
foo.onmouseout = function() {this.style.borderColor='#888888'; this.style.color='#888888';}
foo.onclick = function() {this.style.borderColor='#000000'; this.style.color='#000000';}

</script>

Find by type:

You could find by type if you use the following:

function getElementByType(node,type,tag) {
  var els = node.getElementsByTagName(tag);
  for (var x=0, x<els.length; x++) {
    if (els[x].type && els[x].type.toLowerCase() == type) {
      return els[x]
    }
  }
}
var foo = getElementByType(document.body, 'submit', 'input')
...

What I would do is:

<div id="externalElms">
    (<script> here)
</div>

then use var foo = getElementByType(document.getElementById('externalElms'), 'submit', 'input') so it doesn't have to go through every element on the page.