Javascript function parameter referencing html element

Question

For fun purposes, I wanted to create a 100x100 html table with javascript and use onmouseover to change color. It'd be like a simple way of painting, however when I change the onmouseover to a changeColor function, the parameter is a ClientX and ClientY position and not the html element.

function createTabel(){
    var div = document.getElementById("paint");
    var table = document.createElement("table");
    table.style.border = "1px solid black";
    for (var i = 0; i < 100; i++){
        var row = document.createElement("tr");
        for (var j = 0; j <100; j++){
            var cell = document.createElement("td");

            cell.onmouseover = changeColor;

            cell.style.height = "3px";
            cell.style.width = "3px";
            cell.style.padding = "0";
            cell.style.margin = "0";

            row.appendChild(cell);
        }
        table.appendChild(row);
    }
    div.appendChild(table);
}

and the changeColor function:

function changeColor(cell){
    var color = document.getElementById("color").value;
    cell.style.backgroundColor = color;
}

How can I access the html element that caused the event without an id?

event.target will give you the dom element that caused the event. — Mr. Polywhirl
– Mr. Polywhirl, Commented Apr 28, 2015 at 10:54

user2575725 · Accepted Answer · 2015-04-28 10:53:47Z

2

Try event instead:

function changeColor(e){
    e = e || window.event;
    var el = e.srcElement || e.target; //get the current element(cell)
    var color = document.getElementById("color").value;
    el.style.backgroundColor = color;
}

answered Apr 28, 2015 at 10:53

user2575725

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

Comments

Mr. Polywhirl · Accepted Answer · 2015-04-28 11:44:15Z

-1

Please attach the event in a more robust way so that the event will work in all browsers.

for (var j = 0; j < 100; j++){
    var cell = document.createElement("td");
    addEvent(cell, 'mouseover', changeColor); // See method in code below.
    // ...
}

// Attach the event to all table cells.
[].slice.call(document.querySelectorAll('td')).forEach(function(td) {
  addEvent(td, 'mouseover', changeColor);
});

function changeColor(e) {
    e = e || window.event; // Is the event local or global?
    var el = e.srcElement || e.target; // The element who dispatched the event.
    el.style.backgroundColor = 'red';
}

// Cross-browser event listener.
function addEvent(el, event, fn, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(event, fn, useCapture);
  } else {
    el.attachEvent('on' + event, function() {
      // Call the event with the scope of the target element.
      return fn.call(el, window.event);   
    });
  }
}

<table>
  <thead><tr><th>th1</th><th>th2</th></tr></thead>
  <tbody><tr><td>td1</td><td>td2</td></tr><tbody>
</table>

You can achieve the same effect, as described above, using a little bit of jQuery. jQuery's event listeners set the scope of the target element for you. This makes event handling a bit easier.

$(function() {
  $('table').on('mouseover', 'td', changeColor);

  function changeColor(e) {
    $(this).css('background-color', 'red');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead><tr><th>th1</th><th>th2</th></tr></thead>
  <tbody><tr><td>td1</td><td>td2</td></tr><tbody>
</table>

edited Apr 28, 2015 at 11:44

answered Apr 28, 2015 at 11:21

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

2 Comments

rxgx Over a year ago

How does adding all this complexity help when e.srcElement || e.target is all he needed?

Mr. Polywhirl Over a year ago

It is the proper way to attach an event and it is not that much different than what the poster did. Also, it handles adding events for IE versions less than 9.

Collectives™ on Stack Overflow

Javascript function parameter referencing html element

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related