Hi,
Personally, I would look at refactoring what you have already, before adding new functionality.
In that respect, there are a couple of low hanging fruit, so let’s look at those first.
To start, let’s think about how to organize our code.
It would make sense to move all of the scripts to the bottom of the page, as this will eliminate the need to attach an “onload” event handler directly to the body tag.
This would give us this (I’ve also altered the doctype and added a <title> tag):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Calendar</title>
<link rel="stylesheet" type="text/css" href="daily.css"/>
</head>
<body>
<div id="content">
<h1><img src="img/1.jpg" width="500px" height="500px" border="0" alt="1"/></h1>
<h2>September 1</h2>
<!-- Clock -->
<h3>
<iframe src="clock.html" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="180px" height="40px" title="Clock">
<noframes><div id="noframes"><span>Frames disabled.</span></div></noframes>
</iframe>
</h3>
<!-- Clock -->
</div>
<div id="month">
<div id="extended">September 2013</div>
<div id="days">
<div id="sun">Sun</div>
<div id="mon">Mon</div>
<div id="tue">Tue</div>
<div id="wed">Wed</div>
<div id="thu">Thu</div>
<div id="fri">Fri</div>
<div id="sat">Sat</div>
</div>
<div id="days2">
<div id="one"><input type='button' onclick='changeText()' value='1'/></div>
<div id="two"><input type='button' onclick='changeText2()' value='2'/></div>
<div id="three"><input type='button' onclick='changeText3()' value='3'/></div>
<div id="four"><input type='button' onclick='changeText4()' value='4'/></div>
<div id="five"><input type='button' onclick='changeText5()' value='5'/></div>
<div id="six"><input type='button' onclick='changeText6()' value='6'/></div>
<div id="seven"><input type='button' onclick='changeText7()' value='7'/></div>
<div id="eight"><input type='button' onclick='changeText8()' value='8'/></div>
<div id="nine"><input type='button' onclick='changeText9()' value='9'/></div>
<div id="ten"><input type='button' onclick='changeText10()' value='10'/></div>
<div id="eleven"><input type='button' onclick='changeText11()' value='11'/></div>
<div id="twelve"><input type='button' onclick='changeText12()' value='12'/></div>
<div id="thirteen"><input type='button' onclick='changeText13()' value='13'/></div>
<div id="fourteen"><input type='button' onclick='changeText14()' value='14'/></div>
<div id="fifteen"><input type='button' onclick='changeText15()' value='15'/></div>
<div id="sixteen"><input type='button' onclick='changeText16()' value='16'/></div>
<div id="seventeen"><input type='button' onclick='changeText17()' value='17'/></div>
<div id="eighteen"><input type='button' onclick='changeText18()' value='18'/></div>
<div id="nineteen"><input type='button' onclick='changeText19()' value='19'/></div>
<div id="twenty"><input type='button' onclick='changeText20()' value='20'/></div>
<div id="twentyOne"><input type='button' onclick='changeText21()' value='21'/></div>
<div id="twentyTwo"><input type='button' onclick='changeText22()' value='22'/></div>
<div id="twentyThree"><input type='button' onclick='changeText23()' value='23'/></div>
<div id="twentyFour"><input type='button' onclick='changeText24()' value='24'/></div>
<div id="twentyFive"><input type='button' onclick='changeText25()' value='25'/></div>
<div id="twentySix"><input type='button' onclick='changeText26()' value='26'/></div>
<div id="twentySeven"><input type='button' onclick='changeText27()' value='27'/></div>
<div id="twentyEight"><input type='button' onclick='changeText28()' value='28'/></div>
<div id="twentyNine"><input type='button' onclick='changeText29()' value='29'/></div>
<div id="thirty"><input type='button' onclick='changeText30()' value='30'/></div>
<!--<div id="thirtyOne"><input type='button' onclick='changeText31()' value='31'/></div>-->
</div>
</div>
<script type="text/javascript" src="daily.js"></script>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>
Now the next thing that we could improve is to remove all of the onclick event handlers from the buttons and attach them from within the JavaScript itself.
This separation of a web page’s behaviour from its presentation is known as unobtrusive JavaScript.
It is considered a good practice and makes your code more flexible and easier to maintain.
You can read more about it here: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'button') {
inputs[i].onclick = function(){
changeText(this.value);
}
}
}
This brings us nicely to the next improvement: instead of having thirty individually named functions that do the same thing, you can create one generic function, pass it a parameter and have it behave accordingly.
This would look like this:
// daily.js
window.onload = update;
function update(){
var d = new Date();
var current = d.getDate();
var array = new Array(changeText, changeText2, changeText3, changeText4, changeText5, changeText6,changeText7, changeText8, changeText9, changeText10, changeText11, changeText12, changeText13, changeText14, changeText15, changeText16, changeText17, changeText18, changeText19, changeText20, changeText21, changeText22, changeText23, changeText24, changeText25, changeText26, changeText27, changeText28, changeText29, changeText30, changeText31);
var i = current - 1;
document.getElementById('content').innerHTML = array[i]();
array[i]();
}
function changeText(val){
document.getElementById('content').innerHTML = '<h1><img src="img/' + val + '.jpg" width="500px" height="500px" border="0" alt="' + val + '"/></h1><h2>September ' + val + '</h2><h3><iframe src="clock.html" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="110px" height="40px" title="Clock"><noframes><div id="noframes"><span>Frames disabled.</span></div></noframes></iframe></h3>';
}
Now, as you can see we just removed 90 lines of JS but lost no functionality. Not bad, eh?
I hope this is ok for a start.
There are still lots and lots improvements that can be made and if you’re interested, I’ll be glad to help you make them.
Later on I’ll put the code up on JS fiddle.That way it’ll be easier to make incremental improvements.