Reputation: 13
Having trouble with both getElementById and getElementsByClass
I'm having trouble with both getElementById and getElementsByClass.
What i'm trying to do is hide all table columns that are >6 months in the past, and >3 months in the future. I thought to select table header elements that contain dates by using their class:
var elements = document.getElementsByClass('date_header');
This gets a nodeList out (the correct nodes are shown in a console.log()), but it doesn't seem to be iterable, i.e. elements[0] is undefined and elements.length is 0.
As a work around i thought to select the header row by id, and iterate through its child nodes:
var element = document.getElementById('rent_log_table_header');
However the contents of element are null.
Pulling my hair out on this one! No idea what the issue is. The HTML is valid according to the W3c Validator. Tested on Safari 5.1.3, Firefox 10.0.2, & Chrome 17.0.963.78, both document.getElementsByClass and document.getElementById fail.
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org">
<link rel='icon'
type='image/png'
href='PropertyManagement/Media/Images/favicon.png'>
<meta http-equiv='content-type'
content='text/html; charset=us-ascii'>
<script type='text/javascript'
src='PropertyManagement/Script/Common.js'>
</script>
<script type='text/javascript'
src='PropertyManagement/Script/Rent_Log.js'>
</script>
<link type='text/css'
rel='stylesheet'
href='PropertyManagement/Style/Common.css'>
<link type='text/css'
rel='stylesheet'
href='PropertyManagement/Style/Rent_Log.css'>
<title>
Rent Log
</title>
</head>
<body id='body'
onload='__init();'>
<div id='wrapper'>
<div id='content'>
<ul id='nav_property_specific'
class='nav'>
<li class='portfolio'>
<a href='?page=Portfolio'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Back to Portfolio</span></span></span></span></a>
</li>
<li class='property__information'>
<a href='?page=Property__Information&pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>34
Greenhill</span></span></span></span></a>
</li>
<li class='tenants'>
<a href='?page=Tenants&pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Tenants</span></span></span></span></a>
</li>
<li class='rent__log'>
<a id='selected'
href='?page=Rent__Log&pid=12345678'
name="selected"><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Rent Log</span></span></span></span></a>
</li>
<li class='services'>
<a href='?page=Services&pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Services</span></span></span></span></a>
</li>
<li class='documents'>
<a href='?page=Documents&pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Documents</span></span></span></span></a>
</li>
<li class='logout'>
<a href='?page=Logout'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Logout</span></span></span></span></a>
</li>
</ul>
<div id='main'>
<form name='rent__log_form'
action='&page=Rent__Log&pid=12345678'
method='post'
id="rent__log_form">
<table id='rent_log_table'>
<tr id='rent_log_table_header'
class='calendar_header'>
<td class='name_field'>
Name
</td>
<td>
Fees
</td>
<td>
Deposit
</td>
<td class='date_header'
data-numeric-date='01 2012'
data-col-num='0'>
Jan 2012
</td>
<td class='date_header'
data-numeric-date='02 2012'
data-col-num='1'>
Feb 2012
</td>
<td class='date_header'
data-numeric-date='03 2012'
data-col-num='2'>
Mar 2012
</td>
<td class='date_header'
data-numeric-date='04 2012'
data-col-num='3'>
Apr 2012
</td>
<td class='date_header'
data-numeric-date='05 2012'
data-col-num='4'>
May 2012
</td>
<td class='date_header'
data-numeric-date='06 2012'
data-col-num='5'>
Jun 2012
</td>
<td class='date_header'
data-numeric-date='07 2012'
data-col-num='6'>
Jul 2012
</td>
<td class='date_header'
data-numeric-date='08 2012'
data-col-num='7'>
Aug 2012
</td>
<td class='date_header'
data-numeric-date='09 2012'
data-col-num='8'>
Sep 2012
</td>
<td class='date_header'
data-numeric-date='10 2012'
data-col-num='9'>
Oct 2012
</td>
<td class='date_header'
data-numeric-date='11 2012'
data-col-num='10'>
Nov 2012
</td>
<td class='date_header'
data-numeric-date='12 2012'
data-col-num='11'>
Dec 2012
</td>
</tr>
<tr>
<td class='name_field'>
John Smith
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
</tr>
<tr>
<td class='name_field'>
John Smuth
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
</tr>
<tr>
<td class='name_field'>
John Smythe
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>Unpaid</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
<td>
<span>-</span>
</td>
</tr>
</table>
<div class='button_container'>
<a href='#'
id='edit_payment_log'
class='button'
onclick='document.pressed="edit_payment_log"; Link.hyper("Rent__Log","&pid=12345678");'
name="edit_payment_log">Edit Payment Log</a>
</div>
<div id='account_info_q'
class='question'>
<div id='account_info'
class='text_field_set_question'>
<label class='question_label'>Account Information</label>
<div>
<div id='account_info_bank_name_account_info'
class='text_field_region'>
<label>Bank Name</label><label id='bank_name_account_info'
class='text_field_locked'>-</label>
</div>
<div id='account_info_sort_code_account_info'
class='text_field_region'>
<label>Sort Code</label><label id='sort_code_account_info'
class='text_field_locked'>-</label>
</div>
<div id='account_info_account_number_account_info'
class='text_field_region'>
<label>Account Number</label><label id='account_number_account_info'
class='text_field_locked'>-</label>
</div>
</div>
</div>
</div>
<div class='button_container'>
<a href='#'
id='edit_payment_info'
class='button'
onclick='document.pressed="edit_payment_info"; Link.hyper("Rent__Log","&pid=12345678");'
name="edit_payment_info">Edit Payment Information</a>
</div>
</form>
</div>
<div id='footer'>
<div id='footer_inside'>
Copyright © 2011 Our Company Ltd.<br>
All rights reserved.
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 1
Views: 415
Answers (2)
Reputation: 4077
Maybe you wanted to call document.getElementsByClassName function? For more information look here. It is not crossbrowser as far as I know, so I'd advise you to use a jQuery or other framework to select and control DOM Elements.
Upvotes: 0
Reputation: 120496
This time we get a nodeList out (the correct nodes are shown in a
console.log()), but it doesn't seem to be iterable, i.e.elements[0]is undefined.
console.log('%s', elements) and various other forms will convert elements to a string after the code has finished running so that log entry formatting does not slow down the running of the code doing the logging. Since node lists are live, this can mean that it shows elements that are different from the ones present when console.log is called.
http://www.w3.org/TR/DOM-Level-2-Core/core.html
NodeListandNamedNodeMapobjects in the DOM are live; that is, changes to the underlying document structure are reflected in all relevantNodeListandNamedNodeMapobjects. For example, if a DOM user gets aNodeListobject containing the children of anElement, then subsequently adds more children to that element (or removes children, or modifies them), those changes are automatically reflected in theNodeList, without further action on the user's part.
Are you running your script before the elements have been parsed? If so, you need to run it on document load.
Upvotes: 3
Related Questions
- getElementById and getElementsByClassName not working
- Javascript's getElementsByClassName() is unable to find proper classes
- Issue with document.getElementsByClassName
- getElementByClassName isn't work
- getElementByClassName returning 'undefined', but it works for Id?
- Im forcing to use getElementsByClassName()[] rather than getElementByClass()
- getElementsByClassName doesn't seem to work
- getelementbyclassname instead of getelementbyid is not working
- getElementByClassName Not Returning Results
- chaining using getElementsByClassName and getElementById in javascript