JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

adding button click event in javascript

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Nov 2007
Posts: 144
Reputation: emilio is an unknown quantity at this point 
Solved Threads: 0
emilio emilio is offline Offline
Junior Poster

adding button click event in javascript

 
0
  #1
Dec 17th, 2008
hi
my code is using javascript to dynamically build an html table and fill the table with html buttons.
my code:

javascript Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3.     <title>javascript1</title>
  4. </head>
  5.  
  6. <script lnaguage="javascript">
  7.  
  8. function Init()
  9. {
  10.   var table = document.createElement("tbody");
  11.  
  12.   var newrow,newcol,tmp;
  13.   var array = new Array(16);
  14.  
  15.   for (var i=0 ; i<16 ; i++)
  16.     array[i] = 0;
  17.  
  18.   for (var row = 0 ; row <4 ; row++)
  19.   {
  20.    newrow = document.createElement("tr");
  21.  
  22.    for (var col = 0 ; col<4 ; col++)
  23.    {
  24.     newcol = document.createElement("td");
  25.     var button = document.createElement('input');
  26.     button.type = 'button';
  27.     button.width = '60';
  28.     button.height = '60';
  29.     button.id = (row*10 + col).toString();
  30.     newcol.appendChild(button);
  31.     newrow.appendChild(newcol);
  32.  
  33.     if (row == 3 && col == 3)
  34.        break;
  35.  
  36.       while (array[tmp = Math.floor((15)*Math.random()) + 1] == 1);   
  37.       array[tmp]++;
  38.       button.value = tmp; 
  39.    }
  40.  
  41.    table.appendChild(newrow);
  42.   }
  43.  
  44.   gameTable.appendChild(table);
  45.  
  46. }
  47.  
  48. function onClick(bid)
  49. {
  50.  
  51. }
  52.  
  53. window.onload=Init;
  54. </script>
  55.  
  56. <body>
  57. <form id="myForm">
  58.  
  59.     <div style=" color:Blue; font-size:large; font-style:oblique; left:500; top:30; position:absolute">
  60.      Fifteen Javascript
  61.     </div>
  62.  
  63.     <div style="left:450; top:150; position:absolute"">    
  64.     <table id="gameTable"></table>
  65.     </div>
  66.  
  67. </form>
  68. </body>
  69. </html>
  70.  

my question is how can i add an eventhandler for a button click for every button.
i want to add an onClick javascript function to be performed on every button click and send the buttons id as parameter.

i tried to add this line inside the loop:

newcol.children[0].onclick = onClick(newcol.children[0].id);

but it doesn't seems to work.
Last edited by emilio; Dec 17th, 2008 at 4:44 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: adding button click event in javascript

 
0
  #2
Dec 18th, 2008
Here you have it...
Hope this will solve the issue...

javascript Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3.     <title>javascript1</title>
  4. </head>
  5.  
  6. <script lnaguage="javascript">
  7.  
  8. function Init()
  9. {
  10.   var table = document.createElement("tbody");
  11.  
  12.   var newrow,newcol,tmp;
  13.   var array = new Array(16);
  14.  
  15.   for (var i=0 ; i<16 ; i++)
  16.     array[i] = 0;
  17.  
  18.   for (var row = 0 ; row <4 ; row++)
  19.   {
  20.    newrow = document.createElement("tr");
  21.  
  22.    for (var col = 0 ; col<4 ; col++)
  23.    {
  24.     newcol = document.createElement("td");
  25.     var button = document.createElement('input');
  26.     button.type = 'button';
  27.     button.width = '60';
  28.     button.height = '60';
  29.     button.id = (row*10 + col).toString();
  30.     newcol.appendChild(button);
  31.     newrow.appendChild(newcol);
  32.  
  33.     if (row == 3 && col == 3)
  34.        break;
  35.  
  36.       while (array[tmp = Math.floor((15)*Math.random()) + 1] == 1);   
  37.       array[tmp]++;
  38.       button.value = tmp; 
  39.    }
  40.  
  41.    table.appendChild(newrow);
  42.   }
  43.  
  44.   gameTable.appendChild(table);
  45.  
  46. }
  47.  
  48. document.onclick = function(e) {
  49. e = e ? e : window.event;
  50. t = e.target ? e.target : e.srcElement;
  51.  
  52. if (document.getElementById && t.type == 'button') {
  53. ids = parseInt(t.id.match(/\d/));
  54. /* You can add more function from the switch method. The only problem you have is that you've set your id's from the maximum count of "col" variable, which is 4 in overall count.
  55. So the first 4 line up of buttons will take this event. The rest will copy the function counting back from 0 to 4, which all the buttons from the 2nd row copy this effect! Things can be fixed by incrementing the col value = to the length of buttons being created by your function.
  56. Im sure it will be easy for you to achieve that. Good day to you... */
  57.  
  58. switch(ids) { 
  59. case 0 : alert('This is function no#' + ids); break;
  60. case 1 : alert('Some function ' + ids +  ' To Run'); break;
  61. case 2 : prompt('This is function no#' + ids); break; 
  62. case 3 : confirm('This is function no#' + ids); break;
  63. }
  64. }
  65. }
  66. window.onload=Init;
  67. </script>
  68.  
  69. <body>
  70. <form id="myForm">
  71.  
  72.     <div style=" color:Blue; font-size:large; font-style:oblique; left:500; top:30; position:absolute">
  73.      Fifteen Javascript
  74.     </div>
  75.  
  76.     <div style="left:450; top:150; position:absolute"">    
  77.     <table id="gameTable"></table>
  78.     </div>
  79.  
  80. </form>
  81. </body>
  82. </html>
  83.  
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 91
Reputation: brechtjah is an unknown quantity at this point 
Solved Threads: 9
brechtjah's Avatar
brechtjah brechtjah is offline Offline
Junior Poster in Training

Re: adding button click event in javascript

 
0
  #3
Dec 18th, 2008
Here, this should fix it:
EDIT: I don't know why you used an array by the way, and note the change I did with your switch case to see how it works with your buttons.

html Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. 	<head>
  4. 	    <title>javascript1</title>
  5. 		<script type="text/javascript">
  6. 			function Init()	{
  7. 				var table = document.createElement("tbody");
  8. 				var newrow,newcol,tmp;
  9. 				var i = 0;
  10.  
  11. 				for (var row = 0 ; row <4 ; row++) {
  12. 					newrow = document.createElement("tr");
  13.  
  14. 					for (var col = 0 ; col<4 ; col++) {
  15. 						i++;
  16.  
  17. 						newcol = document.createElement("td");
  18. 						var button = document.createElement('input');
  19. 					    button.type = 'button';
  20. 					    button.style.width = '60px';
  21. 					    button.style.height = '60px';
  22. 					    button.id = (row*10 + col).toString();
  23. 						button.value = i;
  24. 					    newcol.appendChild(button);
  25. 					    newrow.appendChild(newcol);
  26.  
  27. 						if (row == 3 && col == 3) {
  28. 							break;
  29. 						}
  30. 					}
  31.  
  32. 					table.appendChild(newrow);
  33. 				}
  34.  
  35. 				document.getElementById('gameTable').appendChild(table);
  36.  
  37.  
  38. 				document.onclick = function(e) {
  39. 					e = e ? e : window.event;
  40. 					t = e.target ? e.target : e.srcElement;
  41.  
  42. 					if (document.getElementById && t.type == 'button') {
  43. 						ids = parseInt(t.id);
  44. 						/* You can add more function from the switch method. The only problem you have is that you've set your id's from the maximum count of "col" variable, which is 4 in overall count.
  45. 						So the first 4 line up of buttons will take this event. The rest will copy the function counting back from 0 to 4, which all the buttons from the 2nd row copy this effect! Things can be fixed by incrementing the col value = to the length of buttons being created by your function.
  46. 						Im sure it will be easy for you to achieve that. Good day to you... */
  47.  
  48. 						switch(ids) { 
  49. 							case 0:
  50. 								alert('This is function no#' + ids);
  51. 								break;
  52.  
  53. 							case 1:
  54. 								alert('Some function ' + ids +  ' To Run');
  55. 								break;
  56.  
  57. 							case 2:
  58. 								prompt('This is function no#' + ids);
  59. 								break;
  60.  
  61. 							case 3:
  62. 								confirm('This is function no#' + ids);
  63. 								break;
  64.  
  65. 							case 10:
  66. 								alert('Hi, I\'m the button of the second row and the first column');
  67. 								break;
  68.  
  69. 							case 23:
  70. 								alert('Hi, I\'m the button of the third row and the last column');
  71. 								break;
  72.  
  73. 							default:
  74. 								alert('Other button');
  75. 						}
  76. 					}
  77. 				}
  78. 			}
  79. 		</script>
  80. 	</head>
  81.  
  82.  
  83. 	<body onload="javascript:Init();">
  84. 		<form id="myForm" action="">
  85. 			<div style=" color:Blue; font-size:large; font-style:oblique; left:500px; top:30px; position:absolute">
  86. 			Fifteen Javascript
  87. 			</div>
  88.  
  89. 			<div style="left:450px; top:150px; position:absolute">    
  90. 				<table id="gameTable"></table>
  91. 			</div>
  92. 		</form>
  93. 	</body>
  94. </html>
Last edited by brechtjah; Dec 18th, 2008 at 8:13 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 144
Reputation: emilio is an unknown quantity at this point 
Solved Threads: 0
emilio emilio is offline Offline
Junior Poster

Re: adding button click event in javascript

 
0
  #4
Dec 18th, 2008
ok.
thanks for the help.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column createrange() css cursor date debugger dependent disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post problem programming progressbar regex runtime scroll search security select shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC