js onclick event doesn't work on td element

Question

I want to create popup div(named linkdiv holding linkcontent div) on td click which is using this function:

function getLinks(lid) {
  document.getElementById('linkdiv').style.display = "block";
  document.getElementById('linkdiv').style.visibility = "visible";
  document.getElementById('linkcontent').innerHTML = "<div align=center><img src='images/spacer.gif' border=0 height=280 width=10 alt=''><br><img src='images_v2/loading.gif' border=0 alt='Loading content'></div>";
  var lurl = "viewlinksdiv.php?lid="+lid;
  if(window.XMLHttpRequest) {
    reql = new XMLHttpRequest;
  } else if(window.ActiveXObject) {
    reql = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if(reql) {
    reql.onreadystatechange = getLinkResp;
    reql.open("GET",lurl,true);
    reql.send(null);
  } else {
    alert("Your browser does not support XMLHttpRequest technology!");
    doesNotSupport = false;
  }
}

and the td is..

echo "
<tr>
  <td width=240 height=20 align=\ "left\" valign=\ "top\" style=\ "cursor:hand;cursor:pointer;padding-top:".$pad. ";padding-bottom:5px\" onclick=\ "getLinks('".$mid. "');return:false;\"><b class='news_date'>".$mdate."&nbsp;&nbsp;".$cname.$mpol.":</b>&nbsp;
    <font class='news_title'>".$msectname."</font><br>
    <font class='news_date'>".$moretext."</font>
  </td>
</tr>\n";

and the div I want to show is

<div id="linkdiv">
  <div id="linkdiv_body">

    <div id="tapclose" align="right" onclick="closeLink()" alt="Close">X</div>
    <div id="linkcontent" class="linkdiv_font"></div>

  </div>
</div>

this function is working with a href element like

<a class="jslink" href="javascript:getLinks('3975')">link</a>

but doesn't work on td onclick element. which is weird cause it's using the same function. Anyone have any idea why this doesn't work? Thanks.

make sure your stylesheet has a default display on the div that you want to appear. — Jonny
– Jonny, Commented Jan 3, 2018 at 10:49
your syntax is wrong for your td. You shouldn't close the " and use a <?php ?> tag instead to display the value, like in this accepted answer, solution 2 — Kaddath
– Kaddath, Commented Jan 3, 2018 at 10:50
Try to console.log(lid) in getLinks(lid)... You'll see if the function triggers and if the id passed is correct. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jan 3, 2018 at 11:12
try to check your logs, I think there is some issue with the syntax — Venkatesh Konatham
– Venkatesh Konatham, Commented Jan 3, 2018 at 11:26

Venkatesh Konatham · Accepted Answer · 2018-01-04 06:08:48Z

Javascript function is not getting called due to some syntax errors, update your php code with below one. another thing is in your onclick event you have "return:false" it should be "return false"

echo "
 <tr>
  <td width=240 height=20 align='left' valign='top' style='cursor:hand;cursor:pointer;padding-top:".$pad. ";padding-bottom:5px' onclick=\"getLinks('".$mid. "');return false;\"><b class='news_date'>".$mdate."&nbsp;&nbsp;".$cname.$mpol.":</b>&nbsp;
   <font class='news_title'>".$msectname."</font><br>
   <font class='news_date'>".$moretext."</font>
  </td>
 </tr>\n";

and working example is below

function getLinks(lid) {
  alert("called");
  document.getElementById('linkdiv').style.display = "block";
  document.getElementById('linkdiv').style.visibility = "visible";
  document.getElementById('linkcontent').innerHTML = "<div align=center><img src='images/spacer.gif' border=0 height=280 width=10 alt=''><br><img src='images_v2/loading.gif' border=0 alt='Loading content'></div>";
  var lurl = "viewlinksdiv.php?lid="+lid;
  if(window.XMLHttpRequest) {
    reql = new XMLHttpRequest;
  } else if(window.ActiveXObject) {
    reql = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if(reql) {
    reql.onreadystatechange = getLinkResp;
    reql.open("GET",lurl,true);
    reql.send(null);
  } else {
    alert("Your browser does not support XMLHttpRequest technology!");
    doesNotSupport = false;
  }
}

<table>
<tr>
  <td style="cursor:hand;cursor:pointer;padding-top:10;padding-bottom:5px" onclick="getLinks('9999');return false;" width="240" valign="top" height="20" align="left"><b class="news_date">1/1/2017&nbsp;&nbsp;TestTestMPol:</b>&nbsp;
    <font class="news_title">Test</font><br>
    <font class="news_date">More</font>
  </td>
</tr>
</table>

you can click on "TestTestMPol" and you will see a alert.

@AndreiGheorghiu I have updated my answer with more explanation. Please check it

Collectives™ on Stack Overflow

js onclick event doesn't work on td element

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related