Updating another element on event fire

Let's say I have an event attached to one element, but I want to update anothe开发者_运维知识库r 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?

---

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>

---

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

---

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.';
};