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>
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 whenconsole.logis called.http://www.w3.org/TR/DOM-Level-2-Core/core.html
Are you running your script before the elements have been parsed? If so, you need to run it on document load.