adding button click event in javascript

hi
my code is using javascript to dynamically build an html table and fill the table with html buttons.
my code:

<html>
<head>
    <title>javascript1</title>
</head>

<script lnaguage="javascript">

function Init()
{
  var table = document.createElement("tbody");
  
  var newrow,newcol,tmp;
  var array = new Array(16);
  
  for (var i=0 ; i<16 ; i++)
    array[i] = 0;
  
  for (var row = 0 ; row <4 ; row++)
  {
   newrow = document.createElement("tr");
   
   for (var col = 0 ; col<4 ; col++)
   {
    newcol = document.createElement("td");
    var button = document.createElement('input');
    button.type = 'button';
    button.width = '60';
    button.height = '60';
    button.id = (row*10 + col).toString();
    newcol.appendChild(button);
    newrow.appendChild(newcol);
    
    if (row == 3 && col == 3)
       break;
     
      while (array[tmp = Math.floor((15)*Math.random()) + 1] == 1);   
      array[tmp]++;
      button.value = tmp; 
   }
   
   table.appendChild(newrow);
  }
  
  gameTable.appendChild(table);
  
}

function onClick(bid)
{
  
}

window.onload=Init;
</script>

<body>
<form id="myForm">

    <div style=" color:Blue; font-size:large; font-style:oblique; left:500; top:30; position:absolute">
     Fifteen Javascript
    </div>

    <div style="left:450; top:150; position:absolute"">    
    <table id="gameTable"></table>
    </div>

</form>
</body>
</html>

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.

emilio

Junior Poster

163 posts since Nov 2007

Reputation Points: 20

Solved Threads: 0

3 Years Ago

Here you have it...
Hope this will solve the issue...

<html>
<head>
    <title>javascript1</title>
</head>

<script lnaguage="javascript">

function Init()
{
  var table = document.createElement("tbody");
  
  var newrow,newcol,tmp;
  var array = new Array(16);
  
  for (var i=0 ; i<16 ; i++)
    array[i] = 0;
  
  for (var row = 0 ; row <4 ; row++)
  {
   newrow = document.createElement("tr");
   
   for (var col = 0 ; col<4 ; col++)
   {
    newcol = document.createElement("td");
    var button = document.createElement('input');
    button.type = 'button';
    button.width = '60';
    button.height = '60';
    button.id = (row*10 + col).toString();
    newcol.appendChild(button);
    newrow.appendChild(newcol);
    
    if (row == 3 && col == 3)
       break;
     
      while (array[tmp = Math.floor((15)*Math.random()) + 1] == 1);   
      array[tmp]++;
      button.value = tmp; 
   }
   
   table.appendChild(newrow);
  }
  
  gameTable.appendChild(table);
  
}

document.onclick = function(e) {
e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;

if (document.getElementById && t.type == 'button') {
ids = parseInt(t.id.match(/\d/));
/* 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.
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.
Im sure it will be easy for you to achieve that. Good day to you... */

switch(ids) { 
case 0 : alert('This is function no#' + ids); break;
case 1 : alert('Some function ' + ids +  ' To Run'); break;
case 2 : prompt('This is function no#' + ids); break; 
case 3 : confirm('This is function no#' + ids); break;
}
}
}
window.onload=Init;
</script>

<body>
<form id="myForm">

    <div style=" color:Blue; font-size:large; font-style:oblique; left:500; top:30; position:absolute">
     Fifteen Javascript
    </div>

    <div style="left:450; top:150; position:absolute"">    
    <table id="gameTable"></table>
    </div>

</form>
</body>
</html>

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

3 Years Ago

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	    <title>javascript1</title>
		<script type="text/javascript">
			function Init()	{
				var table = document.createElement("tbody");
				var newrow,newcol,tmp;
				var i = 0;
					
				for (var row = 0 ; row <4 ; row++) {
					newrow = document.createElement("tr");
					
					for (var col = 0 ; col<4 ; col++) {
						i++;
						
						newcol = document.createElement("td");
						var button = document.createElement('input');
					    button.type = 'button';
					    button.style.width = '60px';
					    button.style.height = '60px';
					    button.id = (row*10 + col).toString();
						button.value = i;
					    newcol.appendChild(button);
					    newrow.appendChild(newcol);
						
						if (row == 3 && col == 3) {
							break;
						}
					}
					
					table.appendChild(newrow);
				}
				
				document.getElementById('gameTable').appendChild(table);
				
				
				document.onclick = function(e) {
					e = e ? e : window.event;
					t = e.target ? e.target : e.srcElement;
					
					if (document.getElementById && t.type == 'button') {
						ids = parseInt(t.id);
						/* 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.
						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.
						Im sure it will be easy for you to achieve that. Good day to you... */

						switch(ids) { 
							case 0:
								alert('This is function no#' + ids);
								break;
								
							case 1:
								alert('Some function ' + ids +  ' To Run');
								break;
								
							case 2:
								prompt('This is function no#' + ids);
								break;
								
							case 3:
								confirm('This is function no#' + ids);
								break;
								
							case 10:
								alert('Hi, I\'m the button of the second row and the first column');
								break;
							
							case 23:
								alert('Hi, I\'m the button of the third row and the last column');
								break;
							
							default:
								alert('Other button');
						}
					}
				}
			}
		</script>
	</head>


	<body onload="javascript:Init();">
		<form id="myForm" action="">
			<div style=" color:Blue; font-size:large; font-style:oblique; left:500px; top:30px; position:absolute">
			Fifteen Javascript
			</div>
			
			<div style="left:450px; top:150px; position:absolute">    
				<table id="gameTable"></table>
			</div>
		</form>
	</body>
</html>

brechtjah

Junior Poster in Training

92 posts since Nov 2008

Reputation Points: 26

Solved Threads: 9

3 Years Ago

ok.
thanks for the help.

emilio

Junior Poster

163 posts since Nov 2007

Reputation Points: 20

Solved Threads: 0

This question has already been solved

You