Problem with document.getElementById(id).value

**Dormilich** · Apr 6 '09, 05:39 AM

there is no value property in HTMLTableCellEl ement (even if you define a value attribute)

PS: check out the HTML Validation service

**acoder** · Apr 6 '09, 12:19 PM

Also note that IDs cannot (or should not) start with a number - see link.

**Dormilich** · Apr 6 '09, 12:22 PM

Originally posted by acoder

Also note that IDs cannot (or should not) start with a number.

browsers are quite forgiving*. though, of course, the document will be invalid then.

* tested it myself

**phub11** · Apr 6 '09, 02:25 PM

Thanks for the replies. I'm adopting a script I found at the following URL

http://forums.devshed.com/javascript...e-87376-2.html

My version works by using onmousedown to select any cell in a table, and with onmouseover and onmouseup, select a rectangular range of cells. I'd like to put the selected cell IDs (or VALUES) in an array (for PHP later on). Here's my current script....

Code:

function checkHighlight (id)
{
	var idmarker 		= id.split( '.' );
	var column;
	var row;

for ( row = startrow; row <= tableRows; row++ )
	{
for ( column = startcol; column <= tableColumns; column++ )
		{
			document.getElementById( column + '.' + row ).style.backgroundColor	= '#FFFFFF';
		}
	}
counter=0;
myCells=new Array();
for ( row = startrow; row <= idmarker[1]; row++ )
	{
for ( column = startcol; column <= idmarker[0]; column++ )
		{	
			document.getElementById( column + '.' + row ).style.backgroundColor	= highlightColor;
counter++;
myCells[counter]=document.getElementById(id).innerHTML;
		}
	}	
//	document.getElementById( 'tableSize' ).innerHTML	= idmarker[1] + 'x' + idmarker[0];
//	document.getElementById( 'tableSize' ).innerHTML	= myCells[0]+','+myCells[1]+','+myCells[2];
}

Unfortunately this just fills the array with duplicates of the last cell selected. Any sugesstions to fill the array with all the cells selected?

Thanks in advance!

**phub11** · Apr 6 '09, 03:51 PM

Hi again,

I have attached a tidied-up version which should be easier to follow. Any help in putting the selected cells in an array is greatly appreciated!

Code:

function checkHighlight (id)
{
	var idmarker 		= id.split( '.' );
	var column;
	var row;
var string = "";

for ( row = startrow; row <= tableRows; row++ )
	{
for ( column = startcol; column <= tableColumns; column++ )
		{
			document.getElementById( column + '.' + row ).style.backgroundColor	= '#FFFFFF';
		}
	}
counter=0;
myCells=new Array();
for ( row = startrow; row <= idmarker[1]; row++ )
	{
for ( column = startcol; column <= idmarker[0]; column++ )
		{	
			document.getElementById( column + '.' + row ).style.backgroundColor	= highlightColor;
myCells[counter]=document.getElementById(id).innerHTML;
counter++;
		}
	}	
//	document.getElementById( 'tableSize' ).innerHTML	= idmarker[1] + 'x' + idmarker[0];
for ( arraycnt = 0; arraycnt < counter; arraycnt++ )
{
if (string==""){ 
string = myCells[arraycnt]
} else {
string = string + ',' + myCells[arraycnt]
}
}
	document.getElementById( 'selectedCells' ).innerHTML	= 'SELECTED CELLS:'+string;
}

Thanks for any help!

**acoder** · Apr 7 '09, 11:31 AM

Perhaps it might help if you give the values of startcol/row, etc. that are not defined within the function and the HTML of the table so that we're not second-guessing what you're using.

**phub11** · Apr 7 '09, 03:15 PM

Thanks for the reply.

Below is all the code... as you can see the array just duplicates the bottom right-most cell selected.

Any help gratefully appreciated!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript">

function myClick(id){
startnum = document.getElementById(id).id;
start = id.split( '.' );
startcol = start[0];
startrow = start[1];
}

function myHighlight(id){
var idmarker=id.split( '.' );
var column;
var row;
var string = "";
for ( row = startrow; row <= 4; row++ )
{
for ( column = startcol; column <= 4; column++ )
{
document.getElementById( column + '.' + row ).style.backgroundColor='#FFFFFF';
}
}

counter=0;
myCells=new Array();

for ( row = startrow; row <= idmarker[1]; row++ )
{
for ( column = startcol; column <= idmarker[0]; column++ )
{
document.getElementById( column + '.' + row ).style.backgroundColor='#004080';
myCells[counter]=document.getElementById(id).innerHTML;
counter++;
}
}
for ( arraycnt = 0; arraycnt < counter; arraycnt++ )
{
if (string==""){ 
string = myCells[arraycnt]
} else {
string = string + ',' + myCells[arraycnt]
}
}
document.getElementById( 'selectedCells' ).innerHTML	= 'SELECTED CELLS:'+string;
}

function myRelease(id){
}

</script>
</head>
<body>
<table id="table1" style="text-align: left; width: 400px;" border="2"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td></td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>A</td>
      <td id="1.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">1</td>
      <td id="2.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">2</td>
      <td id="3.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">3</td>
      <td id="4.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">4</td>
    </tr>
    <tr>
      <td>B</td>
      <td id="1.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">5</td>
      <td id="2.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">6</td>
      <td id="3.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">7</td>
      <td id="4.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">8</td>
    </tr>
    <tr>
      <td>C</td>
      <td id="1.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">9</td>
      <td id="2.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">10</td>
      <td id="3.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">11</td>
      <td id="4.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">12</td>
    </tr>
    <tr>
      <td>D</td>
      <td id="1.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">13</td>
      <td id="2.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">14</td>
      <td id="3.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">15</td>
      <td id="4.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">16</td>
    </tr>
<TR>
<TD id="selectedCells" colspan="5" rowspan="1" style="text-align:left">SELECTED CELLS:</TD>
</TR>
  </tbody>
</table>
<br>
</body>
</html>

**acoder** · Apr 7 '09, 03:26 PM

Line 34 should be:

Code:

myCells[counter]=document.getElementById(column + '.' + row).innerHTML;

Note that if you mouse over without having first clicked, you will get an error because startcol/row won't have been set. Another problem is that when you click on another cell, you need to reset the background colours.

**phub11** · Apr 7 '09, 03:56 PM

Doh! Thanks for the correction!

Yeah, I'm trying to set things up so that cells are selected by click-drag-and-release. I only want "onmouseove r" activated while "onmousedow n" is active. I'm guessing I need to embed the myHighlight function when myClick is engaged. Any ideas on how I might do this?

Thanks!

**acoder** · Apr 7 '09, 06:23 PM

You may want to look into the onmousemove event.

**phub11** · Apr 8 '09, 04:27 PM

Okay... I've figured out how to enable and disable "onmousemov e", depending on whether a mouse button event is flagged down or up, but could someone explain to my why the "id" of the selected cell now isn't being passed to the function:

Code:

window.onload = function() {
//monitor mouseclicks over "mytable"
	document.getElementById("mytable").onmousedown = mouseDownHandler
	document.getElementById("mytable").onmouseup   = mouseUpHandler
}

function mouseDownHandler() {
startnum = document.getElementById(this.id).id;
alert(startnum);
}

</script>
</head>
<body>
<table id="mytable"  style="text-align: left; width: 400px;" border="2"
 cellpadding="2" cellspacing="2">
  <tbody>
     <tr>
      <td>A</td>
      <td id="1.1">1</td>
      <td id="2.1">2</td>
      <td id="3.1">3</td>
      <td id="4.1">4</td>
    </tr>

Thanks!

**Dormilich** · Apr 8 '09, 04:42 PM

line 8 seems strange, wouldn't be startnum = this.id; be more reasonable?

**phub11** · Apr 8 '09, 05:09 PM

Thanks for the reply!

I now get an alert (i.e., startnum is assigned), but "this.id" is always assigned "mytable" rather than the id of the cell I just clicked.

Yeah, I've a lot to learn regarding DOMs.

Thanks in advance for any further help!

**phub11** · Apr 8 '09, 06:10 PM

Figured it out...

Code:

function mouseDownHandler(e) {
startnum = e.target.id;
alert(startnum);
}

Problem with document.getElementById(id).value

Problem with document.getElementById(id).value

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment