Setting the onClick property dynamically

Question

I am trying to set the onClick property of a dynamically generated div in a loop but the code below is not working beyond generating the divs. Can someone please help me out?

<script type="text/javascript">
function gengrid()
      {
          var i=0;
          var num_stud=8;
          var newdiv;
          var divIdName;
          var maindiv;
          for(i=1;i<=num_stud;i++)
          {
             newdiv = document.createElement('div');
             divIdName = '50'+i;
             newdiv.setAttribute('id',divIdName);
             newdiv.onClick= function(){addit(i);};
             newdiv.innerHTML = '<img src=50'+i+'.jpg alt="a"></img>';
             maindiv=document.getElementById('main');
             maindiv.appendChild(newdiv);
          }
      }
   gengrid();
   function addit(picno)
      {
          alert(picno+'');
       } 
  </script>

Try newdiv.onclick with simple c.

Indi
– Indi

2013-09-10 08:12:24 +00:00
Commented Sep 10, 2013 at 8:12 — Indi
– Indi, Commented Sep 10, 2013 at 8:12
Small case c works , thankyou

Abhishek Singh
– Abhishek Singh

2013-09-10 08:20:48 +00:00
Commented Sep 10, 2013 at 8:20 — Abhishek Singh
– Abhishek Singh, Commented Sep 10, 2013 at 8:20
now it always alerts you 9 , right?

Ivan Chernykh
– Ivan Chernykh

2013-09-10 08:27:08 +00:00
Commented Sep 10, 2013 at 8:27 — Ivan Chernykh
– Ivan Chernykh, Commented Sep 10, 2013 at 8:27

David MacCrimmon · Accepted Answer · 2013-09-10 08:14:11Z

1

The onclick method should have a lowercase c.

See this fiddle: http://jsfiddle.net/MTpUV/

<script type="text/javascript">
function gengrid()
      {
          var i=0;
          var num_stud=8;
          var newdiv;
          var divIdName;
          var maindiv;
          for(i=1;i<=num_stud;i++)
          {
             newdiv = document.createElement('div');
             divIdName = '50'+i;
             newdiv.setAttribute('id',divIdName);
             newdiv.onclick= function(){addit(i);};
             newdiv.innerHTML = '<img src=50'+i+'.jpg alt="a"></img>';
             maindiv=document.getElementById('main');
             maindiv.appendChild(newdiv);
          }
      }
   gengrid();
   function addit(picno)
      {
          alert(picno+'');
       } 
  </script>

answered Sep 10, 2013 at 8:14

David MacCrimmon

9661 gold badge6 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Setting the onClick property dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related