JavaScript Events Question

Question

Happy New Year 2010 everyone!

I have a question on JavaScript events.

Lets say I have an event attached to one element, but I want to update another element when it fires.

var el = document.getElementById("el"),
    el1 = document.getElementById("el1");

el.onmouseover = function() {

    // Here I want to update for example the innerHTML property 
    // of el1 but el1 is undefined in this scope
}

How do I achieve this?

Answer 1

Not so. el1 is indeed defined in that scope. If it doesn't seem to be, you've probably got an error somewhere. Tested it, even, with this HTML:

<p id=el>el
<p id=el1>el1

<script>
var el = document.getElementById("el"),
    el1 = document.getElementById("el1");

el.onmouseover = function() {
  alert(el1);
}
</script>

Answer 2

var el = document.getElementById("el");


el.onmouseover = function() 
{
    var el1 = document.getElementById("el1");
    el1.innerHTML = 'New values';
}

Answer 3

Would it be a pain to get the element inside of the mouseover event?

var el = document.getElementById('el');
el.onmouseover = function(evt) {
  var el_inner = evt.target;
  var el2_inner = document.getElementById('el2');
  el2_inner.innerHTML = 'editing the html here.';
};