Adding an onclick event to a div element

Question

I saw a few similar topics which did help but I have specific problem and didn t manage to solve it alone so if anyone can help out I would appreciate it  I want to add onclick event to a div element    HTML     lt div id  thumb0  class  thumbs  onclick  klikaj  rad1    gt  lt  div gt    JavaScript   function klikaj i        document getElementById i  style visibility  visible       Wanted result  div with id  rad1   which is hidden  turns visible  when clicked on div with id  thumb0     This works when I add it to a button element but don t know how it goes with div elements

User · Answer

I m not sure what the problem is  running the below works as expected    lt div id  thumb0  class  thumbs  onclick  klikaj  rad1    gt knock knock lt  div gt    lt div id  rad1  style  visibility  hidden  gt hello world lt  div gt                                   lt script gt  function klikaj i        document getElementById i  style visibility  visible      lt  script gt    See also  http   jsfiddle net 5tD4P

User · Answer

Depends in how you are hiding your div  diplay none is different of visibility hidden and the opacity 0  Visibility then use    style visibility  visible   Display then use    style display  block   or others depends how you setup ur css  inline  inline-block  flex      Opacity then use    style opacity  1

User · Answer

Its possible  we can specify onclick event in    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt Title lt  title gt   lt  head gt   lt body gt   lt div id  thumb0  class  thumbs  onclick  fun1  rad1    style  height 250px  width 100   background-color yellow    gt  lt  div gt   lt div id  rad1  style  height 250px  width 100  background-color red   onclick  fun2  thumb0    gt hello world lt  div gt                                   lt script gt  function fun1 i        document getElementById i  style visibility  hidden     function fun2 i        document getElementById i  style visibility  hidden      lt  script gt   lt  body gt   lt  html gt

User · Answer

I think You are using   --style  display none --   for hiding the div   Use this code    lt script gt      function klikaj i            document getElementById i  style display    block          lt  script gt   lt div id  thumb0  class  thumbs  onclick  klikaj  rad1    gt Click Me    lt  div gt   lt div id  rad1  class  thumbs  style  display none  gt Helloooooo lt  div gt

User · Answer

maybe your script tab has some problem   if you set type  must type  application javascript     lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt              Hello          lt  title gt       lt  head gt       lt body gt           lt div onclick  showMsg  Hello    gt              Click me show message          lt  div gt           lt script type  application javascript  gt              function showMsg item                alert item                      lt  script gt       lt  body gt   lt  html gt

[javascript] Adding an onclick event to a div element

Examples related to javascript

Examples related to dom-events