javascript and td element events properties in browsers

Question

I can't use JQuery.
Trying to set an event listner on td element, such that if user clicks on it, it will read text in td and will look for duplicates in same table rows. E.g ABC is duplicate.

<tr><td onclick='foo()'>ABC</td><td>7</td></tr>
<tr><td onclick='foo()'>DEF</td><td>8</td></tr>
<tr><td onclick='foo()'>HIJ</td><td>9</td></tr>
<tr><td onclick='foo()'>ABC</td><td>10</td></tr>

Some one said I can't use onclick method on td tag, so I did this.

<tr><td><span onclick='foo()'>XYZ</span></td><td>2</td></tr>

And event function is as follows:

function foo(e) {  
          alert('hi');
          alert(e.target);
//        alert(window.Event.target.innerHTML);          
//        alert(event.target.text);  
//        alert(event.target.tagName);  
//        alert(event.target.textContent);                
//        alert(event.target.parentElement.tagName);
//        alert(event.target.innerHTML);

The first thing I noticed is that Firefox, IE, don't even start event code methods and properties. They just run till hi alert. But the rest of code doesn't get executed.

Chrome, on the other hand, is able to run the event code. I can successfully get innerHtml using alert(event.target.innerHTML);

How to make it run in Firefox and IE browsers.

nanndoj · Accepted Answer · 2015-02-19T13:08:38.883

You have to pass event as parameter to your foo function:

    <tr><td onclick='foo(event)'>ABC</td><td>7</td></tr>
    <tr><td onclick='foo(event)'>DEF</td><td>8</td></tr>
    <tr><td onclick='foo(event)'>HIJ</td><td>9</td></tr>
    <tr><td onclick='foo(event)'>ABC</td><td>10</td></tr>

Then you will be able to call. But you also have to check for the target which may have different names in IE browsers:

var target = e.target || e.srcElement;

Here is a Working Fiddle

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

You are executing a function without a parameter. So the "e" is gonna be undefined.

<tr><td><span onclick='foo(this)'>XYZ</span></td><td>2</td></tr>

now you can use e which represents the Dom element.

This link might help you: what's "this" in javascript onclick?

Cheers, Valentin

edited May 23 '17 at 12:06

Community

1
1

answered Feb 19 '15 at 13:02

valentin

86
6

I have tried both function foo(e) and function foo(), only chrome is able to run, but Firefox and IE fails. Chrome executes even onclick='foo()' successfully, no matter if I use foo(e) or foo(). – msinfo Feb 19 '15 at 13:07
That's because chrome passes 'event' as a implicit param to your event function. Firefox and IE don't do that! – nanndoj Feb 19 '15 at 13:10

score 0 · Answer 3 · answered Feb 19 '15 at 13:19

I tested this in Firefox, Explorer and Chrome and works as expected:

<table>
<tr><td onclick='foo(this)'>ABC</td><td>7</td></tr>
<tr><td onclick='foo(this)'>DEF</td><td>8</td></tr>
<tr><td onclick='foo(this)'>HIJ</td><td>9</td></tr>
<tr><td onclick='foo(this)'>ABC</td><td>10</td></tr>
</table>

<script>
function foo(element){
    var myContent = element.innerHTML;
    var trElementsInTable = element.parentElement.parentElement.children;
    var numberOfOcurrences = 0;
    for (i=0;i<trElementsInTable.length;i++){
        if (trElementsInTable[i].children[0].innerHTML == myContent) numberOfOcurrences++
    }
    if (numberOfOcurrences > 1){
        alert("I've found " + numberOfOcurrences + " ocurrences of content " + myContent);
    }
    else{
        alert("Ok I am not repeated");
    }
}
</script>

Hope it helps

javascript and td element events properties in browsers

3 Answers3