Problem with document.getElementById(id).value

127 100+

Could someone please explain why the following works in IE5, but not FF3?

Thanks in advance!

Expand|Select|Wrap|Line Numbers

 
function meRelease(id){

endnum = document.getElementById(id).value;

alert(endnum);

}

Expand|Select|Wrap|Line Numbers

 
<td width="30%" id="1.1" value="1" onmouseover="checkHighlight(this.id)" onmousedown="meClick(this.id)" onmouseup="meRelease(this.id)"><div align="center">1</div></td>

Apr 5 '09 #1

Follow Post Reply

7477

Dormilich

8,658

Expert Mod 8TB

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

PS: check out the HTML Validation service

Apr 6 '09 #2

acoder

16,027

Expert Mod 8TB

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

Apr 6 '09 #3

Dormilich

8,658

Expert Mod 8TB

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

* tested it myself

Apr 6 '09 #4

phub11

127

100+

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....

Expand|Select|Wrap|Line Numbers

 
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!

Apr 6 '09 #5

phub11

127

100+

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!

Expand|Select|Wrap|Line Numbers

 
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!

Apr 6 '09 #6

acoder

16,027

Expert Mod 8TB

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.

Apr 7 '09 #7

phub11

127

100+

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!

Expand|Select|Wrap|Line Numbers

 
<!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>

Apr 7 '09 #8

acoder

16,027

Expert Mod 8TB

Line 34 should be:

Expand|Select|Wrap|Line Numbers

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.

Apr 7 '09 #9

phub11

127

100+

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 "onmouseover" activated while "onmousedown" 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!

Apr 7 '09 #10

acoder

16,027

Expert Mod 8TB

You may want to look into the onmousemove event.

Apr 7 '09 #11

phub11

127

100+

Okay... I've figured out how to enable and disable "onmousemove", 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:

Expand|Select|Wrap|Line Numbers

 
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!

Apr 8 '09 #12

Dormilich

8,658

Expert Mod 8TB

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

Apr 8 '09 #13

phub11

127

100+

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!

Apr 8 '09 #14

phub11

127

100+

Figured it out...

Expand|Select|Wrap|Line Numbers

 
function mouseDownHandler(e) {

startnum = e.target.id;

alert(startnum);

}

Apr 8 '09 #15

phub11

127

100+

Just a quick not to say the above is NOT compatible with IE5. Instead use:

Expand|Select|Wrap|Line Numbers

 
document.onmouseover = function(e){

e = e || window.event;

targ = e.target || e.srcElement;

currcoords = targ.id;

alert(currcoords);

}

Thanks!

Apr 9 '09 #16

Problem with document.getElementById(id).value

Post your reply

Similar topics