CODEWITHSUNDEEP
javascriptevent-handling
Guga Nemsitsveridze
Guga Nemsitsveridze

Reputation: 751

Why JavaScript Performs "click" event, when I don't click on the item?

I added eventListener on DOM object using JS, but this listeners triggers, as soon as page is loaded and it doesn't have sense, when I'm clicking on this item.

This is my code, where I'm adding eventListener to the item:

 let table = document.getElementById('data_table' + deal);
 for (let r = 0, n = table.rows.length; r < n; r++) {
     table.rows[r].cells[2].addEventListener("click", logThis(this));
 }

and my function which should be execute on item click, looks like this:

 function logThis(me) {
     console.log(me);
 }

When browser renders page, clicking is performing itself, without my interference. Please, if anyone here knows, why it happens, write the answer.

EDIT

When I'm clicking, on table cell, nothing happens

Upvotes: 0

Views: 2345

Answers (4)

Guga Nemsitsveridze
Guga Nemsitsveridze

Reputation: 751

Despite founding of issue, why my code wasn't working, (I was invoking function) I still was not able to add eventListener to the DOM element. So, I tried to set attribute to this element using JavaScript and now it works. I'm afraid, that this is not best solution, but It is still kinda way to accomplish my aim.

let table = document.getElementById('data_table' + deal);
for (let r = 0, n = table.rows.length; r < n; r++) {
     table.rows[r].cells[2].setAttribute("onclick", "logThis(this)");
}

Upvotes: 0

Mister Jojo
Mister Jojo

Reputation: 22365

You can also use a global event listener on your table with event delegation

document.querySelector('#my-Table').onclick =e=>{
  if ( e.target.tagName.toLowerCase() != 'td') return
  if ( e.target.cellIndex !=2 ) return

  console.clear()
  console.log('=>',  e.target.textContent , ' is clicked !')
}
table { border-collapse: collapse}
td { border: 1px solid grey; padding: .3em .5em;}
<table id="my-Table">
  <tbody>
      <tr><td>aa</td><td>bb</td><td>cc</td><td>dd</td></tr>
      <tr><td>ee</td><td>ff</td><td>gg</td><td>hh</td></tr>
      <tr><td>ii</td><td>jj</td><td>kk</td><td>ll</td></tr>
    </tbody>
</table>
<p> this get click only on row 2 ( cc / gg / kk ) </p>

Upvotes: 1

codeVerine
codeVerine

Reputation: 762

Adding my comment as an aswer here to help other beginners get into this issue. Here you have mixed both addEventListener signature and the way you add onclick handlers in HTML.

When you attach an eventListener using JS, you dont have to invoke the function(ie no need to use the parenthesis). So your code will be like this: table.rows[r].cells[2].addEventListener("click", logThis);

When you attach an event handler from HTML you do this: <td onclick="logThis()">Click me</td> Here you need to pass the string with function invocation.

Upvotes: 3

Patrick L&#252;thi
Patrick L&#252;thi

Reputation: 324

I had the same problem. You need to create a function in the addEventListener and than call your method.

table.rows[r].cells[2].addEventListener("click", function () {logThis(this)});

function logThis(me) {
    console.log(me);
}

That should do the trick.

Upvotes: 1

Related Questions