CODEWITHSUNDEEP
javascriptgetelementbyid
Dave
Dave

Reputation: 80

document.getElementById(variable) Help!

I know it can be done but am having issues getting it to work. Basically I want to change the font color of a specific table cell based on a variable which changes daily, in effect highlighting the day of the week in a calendar. I know that a variable can be used to get the element id but what am I missing here? I have tried using a unique DIV inside each cell but get the same error - "Object Required". Thanks in advance. Here is the code:

<style>

td#day1{color:white;} td#day2{color:white;} td#day3{color:white;} td#day4{color:white;} etc.. 

<script type="text/javascript">
function calculate_date(){
    currentTime = new Date();
    day = currentTime.getDate();
    return day;
    }
function highlight_day() {
    calculate_date(); 
    today = 'day'+ day;
    document.getElementById(today).style.color= "red";
    }
document.onload(highlight_day());
</script>
</head>
<body>
SEPTEMBER
<table class="cal">
<tr>
<td id="day1">1</td><td id="day2">2</td><td id="day3">3</td><td id="day4">4</td>

Upvotes: 3

Views: 17394

Answers (2)

too much php
too much php

Reputation: 91018

This function is incorrect:

function highlight_day() {
  calculate_date(); 
  today = 'day'+ day;
  document.getElementById(today).style.color= "red";
}

The 'day' variable is not set anywhere. You probably wanted this:

function highlight_day() {
  var day = calculate_date(); 
  var today = 'day'+ day;
  document.getElementById(today).style.color= "red";
}

Upvotes: 9

ChadT
ChadT

Reputation: 7693

Change this line:

calculate_date();

to:

var day = calculate_date();

The error you are getting is because 'day' does not exist within the current scope.

Upvotes: 6

Related Questions