469,289 Members | 2,242 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,289 developers. It's quick & easy.

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
  1. function meRelease(id){
  2. endnum = document.getElementById(id).value;
  3. alert(endnum);
  4. }
  5.  
Expand|Select|Wrap|Line Numbers
  1. <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>
  2.  
Apr 5 '09 #1
15 7357
Dormilich
8,651 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,651 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
  1. function checkHighlight (id)
  2. {
  3.     var idmarker         = id.split( '.' );
  4.     var column;
  5.     var row;
  6.  
  7. for ( row = startrow; row <= tableRows; row++ )
  8.     {
  9. for ( column = startcol; column <= tableColumns; column++ )
  10.         {
  11.             document.getElementById( column + '.' + row ).style.backgroundColor    = '#FFFFFF';
  12.         }
  13.     }
  14. counter=0;
  15. myCells=new Array();
  16. for ( row = startrow; row <= idmarker[1]; row++ )
  17.     {
  18. for ( column = startcol; column <= idmarker[0]; column++ )
  19.         {    
  20.             document.getElementById( column + '.' + row ).style.backgroundColor    = highlightColor;
  21. counter++;
  22. myCells[counter]=document.getElementById(id).innerHTML;
  23.         }
  24.     }    
  25. //    document.getElementById( 'tableSize' ).innerHTML    = idmarker[1] + 'x' + idmarker[0];
  26. //    document.getElementById( 'tableSize' ).innerHTML    = myCells[0]+','+myCells[1]+','+myCells[2];
  27. }
  28.  
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
  1. function checkHighlight (id)
  2. {
  3.     var idmarker         = id.split( '.' );
  4.     var column;
  5.     var row;
  6. var string = "";
  7.  
  8. for ( row = startrow; row <= tableRows; row++ )
  9.     {
  10. for ( column = startcol; column <= tableColumns; column++ )
  11.         {
  12.             document.getElementById( column + '.' + row ).style.backgroundColor    = '#FFFFFF';
  13.         }
  14.     }
  15. counter=0;
  16. myCells=new Array();
  17. for ( row = startrow; row <= idmarker[1]; row++ )
  18.     {
  19. for ( column = startcol; column <= idmarker[0]; column++ )
  20.         {    
  21.             document.getElementById( column + '.' + row ).style.backgroundColor    = highlightColor;
  22. myCells[counter]=document.getElementById(id).innerHTML;
  23. counter++;
  24.         }
  25.     }    
  26. //    document.getElementById( 'tableSize' ).innerHTML    = idmarker[1] + 'x' + idmarker[0];
  27. for ( arraycnt = 0; arraycnt < counter; arraycnt++ )
  28. {
  29. if (string==""){ 
  30. string = myCells[arraycnt]
  31. } else {
  32. string = string + ',' + myCells[arraycnt]
  33. }
  34. }
  35.     document.getElementById( 'selectedCells' ).innerHTML    = 'SELECTED CELLS:'+string;
  36. }
  37.  
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <script language="javascript">
  5.  
  6. function myClick(id){
  7. startnum = document.getElementById(id).id;
  8. start = id.split( '.' );
  9. startcol = start[0];
  10. startrow = start[1];
  11. }
  12.  
  13. function myHighlight(id){
  14. var idmarker=id.split( '.' );
  15. var column;
  16. var row;
  17. var string = "";
  18. for ( row = startrow; row <= 4; row++ )
  19. {
  20. for ( column = startcol; column <= 4; column++ )
  21. {
  22. document.getElementById( column + '.' + row ).style.backgroundColor='#FFFFFF';
  23. }
  24. }
  25.  
  26. counter=0;
  27. myCells=new Array();
  28.  
  29. for ( row = startrow; row <= idmarker[1]; row++ )
  30. {
  31. for ( column = startcol; column <= idmarker[0]; column++ )
  32. {
  33. document.getElementById( column + '.' + row ).style.backgroundColor='#004080';
  34. myCells[counter]=document.getElementById(id).innerHTML;
  35. counter++;
  36. }
  37. }
  38. for ( arraycnt = 0; arraycnt < counter; arraycnt++ )
  39. {
  40. if (string==""){ 
  41. string = myCells[arraycnt]
  42. } else {
  43. string = string + ',' + myCells[arraycnt]
  44. }
  45. }
  46. document.getElementById( 'selectedCells' ).innerHTML    = 'SELECTED CELLS:'+string;
  47. }
  48.  
  49. function myRelease(id){
  50. }
  51.  
  52. </script>
  53. </head>
  54. <body>
  55. <table id="table1" style="text-align: left; width: 400px;" border="2"
  56.  cellpadding="2" cellspacing="2">
  57.   <tbody>
  58.     <tr>
  59.       <td></td>
  60.       <td>1</td>
  61.       <td>2</td>
  62.       <td>3</td>
  63.       <td>4</td>
  64.     </tr>
  65.     <tr>
  66.       <td>A</td>
  67.       <td id="1.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">1</td>
  68.       <td id="2.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">2</td>
  69.       <td id="3.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">3</td>
  70.       <td id="4.1" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">4</td>
  71.     </tr>
  72.     <tr>
  73.       <td>B</td>
  74.       <td id="1.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">5</td>
  75.       <td id="2.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">6</td>
  76.       <td id="3.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">7</td>
  77.       <td id="4.2" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">8</td>
  78.     </tr>
  79.     <tr>
  80.       <td>C</td>
  81.       <td id="1.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">9</td>
  82.       <td id="2.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">10</td>
  83.       <td id="3.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">11</td>
  84.       <td id="4.3" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">12</td>
  85.     </tr>
  86.     <tr>
  87.       <td>D</td>
  88.       <td id="1.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">13</td>
  89.       <td id="2.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">14</td>
  90.       <td id="3.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">15</td>
  91.       <td id="4.4" onmousedown="myClick(this.id)"  onmouseover="myHighlight(this.id)" onmouseup="myRelease(this.id)">16</td>
  92.     </tr>
  93. <TR>
  94. <TD id="selectedCells" colspan="5" rowspan="1" style="text-align:left">SELECTED CELLS:</TD>
  95. </TR>
  96.   </tbody>
  97. </table>
  98. <br>
  99. </body>
  100. </html>
  101.  
Apr 7 '09 #8
acoder
16,027 Expert Mod 8TB
Line 34 should be:
Expand|Select|Wrap|Line Numbers
  1. 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
  1. window.onload = function() {
  2. //monitor mouseclicks over "mytable"
  3.     document.getElementById("mytable").onmousedown = mouseDownHandler
  4.     document.getElementById("mytable").onmouseup   = mouseUpHandler
  5. }
  6.  
  7. function mouseDownHandler() {
  8. startnum = document.getElementById(this.id).id;
  9. alert(startnum);
  10. }
  11.  
  12. </script>
  13. </head>
  14. <body>
  15. <table id="mytable"  style="text-align: left; width: 400px;" border="2"
  16.  cellpadding="2" cellspacing="2">
  17.   <tbody>
  18.      <tr>
  19.       <td>A</td>
  20.       <td id="1.1">1</td>
  21.       <td id="2.1">2</td>
  22.       <td id="3.1">3</td>
  23.       <td id="4.1">4</td>
  24.     </tr>
  25.  
Thanks!
Apr 8 '09 #12
Dormilich
8,651 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
  1. function mouseDownHandler(e) {
  2. startnum = e.target.id;
  3. alert(startnum);
  4. }
  5.  
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
  1. document.onmouseover = function(e){
  2. e = e || window.event;
  3. targ = e.target || e.srcElement;
  4. currcoords = targ.id;
  5. alert(currcoords);
  6. }
  7.  
Thanks!
Apr 9 '09 #16

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Federico Bari | last post: by
3 posts views Thread by michael | last post: by
2 posts views Thread by michael | last post: by
7 posts views Thread by raknin | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.