473,395 Members | 1,885 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > problem with document.getelementbyid(id).value

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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 7680
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
  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,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
  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

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

Similar topics

4
** IE5, IE6 and NETSCAPE COMPATIBILITY PROBLEM **
by: Federico Bari | last post by:
Good morning all from italy, i have probably a compatibility problem with a html/javascript page. The aim of the code of the file test.htm you find here following (copy the 3 files in the...
Javascript
3
Check if document ID exists?
by: michael | last post by:
I guess this is partly a javascript questions, but is there a way to check if a CSS id or class exists anywhere on a page. For example, if the id "bla" exists, it should return true only if the...
HTML / CSS
2
Check for document ID?
by: michael | last post by:
Is there a way for Javascript to check if a document CSS id exist anywhere on a page, for example, if "bla" exists? <a href="asf" id="bla">
Javascript
10
How to reference an element passed by ID to function using getElementByID
by: JJA | last post by:
I'm trying to use document.getElementByID inside a function where the ID is passed as an argument. I get the same error ("Element has no properties") on the same statement inside the commonCheck...
Javascript
4
Error in document.getElementById(id).style.background-position = "-200px -500px"?
by: Ghyslaine Crespe | last post by:
Hello, In my script, the line document.getElementById(id).style.background-position = "-200px -500px"; fails ! So, how can I change the background-position value ?
Javascript
2
Problem: Value of a variable is lost on second postback
by: summer00 | last post by:
Hi everyone, I found that the value of a variable(string type for example) is lost after the aspx page postback. E.G: private void Page_Load(object sender, System.EventArgs e) {
ASP.NET
2
document.getElementById('id') find out what type of element in javascript
by: Katie | last post by:
Hi I have a function which uses the document.getElementById('id') to change attributes of form objects etc. Is there any way i can find out if the element is a checkbox, textbox, radio button...
Javascript
2
Firefox Error document.getElementById(id) has no properties
by: vps | last post by:
Please help me get the value of a textarea field: --------------------- The script --------------------- <html> <head> <script type="text/javascript">
Javascript
7
Problem with a carousel
by: raknin | last post by:
Hi I have a carousel script. I want to load the carousel with a new set of pictures every time I press a button. The problem that I have that the script append the new pictures to the olds one...
Javascript
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!