Removing the 'Select Month' from the options is more logical, it's not a month, and by placing it in a fieldset-legend makes it a valid document.
I think it is there as a remnant of someone expecting an onchange event being added to the <SELECT> element. If that is not a requirement, then the legend is better. It would be a waste of space if js wasn't enabled (as would all of this actually ).
Since I'm not yet comfortable with the 'createElement' and 'addChild' syntax,
and because I obviously code a lot slower that others, here is my 2 cents.
I added a little more so that someone could see the value of the selected box should the need arise.
PHP Code:
<html>
<head>
<title>autoMonth() JS function</title>
<script type="text/javascript">
// suggest putting following script into separate file named 'autoMonth.js'
monthName = new Array
('January','February','March','April','May','June','July','August','September','October','November','December');
function autoMonth() {
var time = new Date();
var month = time.getMonth();
var date = month - 12;
var realJavaScriptMonth = month;
var future = month + 0;
month = month + 1; /* Compensate for "January" being "0" */
document.writeln ("<form><select id='autoMonthSelect'><option value=\"\">Select Month");
do {
month = date;
if (month >= 12) { month = month - 12; }
if (month < 0) { month = month + 12; }
date++;
var dateName = monthName[month];
month++;
realJavaScriptMonth++;
document.write ("<option value=\"" + realJavaScriptMonth + "\">" + dateName + "");
realJavaScriptMonth++;
}
while (date < future)
document.write ("</select></form>");
}
// ------------------------------------------------------------------------------
// Demonstration Action (Not required for function above to work):
function autoMonth_Info(elem) {
return document.getElementById(elem).options[document.getElementById(elem).selectedIndex].text;
}
function Demo() {
document.writeln("<button onClick=document.getElementById('autoMonthSelected').value=autoMonth_Info('autoMonthSelect')>");
document.writeln('Show Selected Value</button><br />');
document.writeln("<input type='text' id='autoMonthSelected' value=''>");
}
// ------------------------------------------------------------------------------
</script>
</head>
<body>
<h1>autoMonth() JS funtion</h1>
<script type="text/javascript">
autoMonth();
document.writeln('<p />Demonstraton:<br />');Demo();
</script>
</body>
</html>
The 'challenge' is a neat idea.
Simple. Useful. Full of alternative coding methods.
Hopefully helpful for both the new and experienced coder.
Since I'm not yet comfortable with the 'createElement' and 'addChild' syntax.
Pity. You must be comfortable with DOM methods if you want to be a javascript coder. document.write() is an old fashioned and non-dynamic method. But if you want anything else than standard DOM, you should have used innerHTML instead of document.write()...
Pity. You must be comfortable with DOM methods if you want to be a javascript coder. document.write() is an old fashioned and non-dynamic method. But if you want anything else than standard DOM, you should have used innerHTML instead of document.write()...
Should I assume I should not submit to the challenge if I am not yet familiar with the latest and greatest javascript syntax?
Sorry, I'm not sure the accepted method was up to this criteria either, but I will still appreciate the attempt!
(I had not seen the code by 'gil Davis' at the time of my submission ... I might have recommended modications to that script instead).
While I agree my solution may not be the best,
perhaps you could show how to improve it further for me and other 'coders' that would like to learn better techniques using javascripts?
While I cannot speak for 'LeeU', I believe this is what was in mind when invisioning the challenge concept in a forum presentation.
IMHO: I still learn from the other methods submitted, and so long as they work with the "most compatible" number of browsers,
I'll use (and modify) them until the challenge comes up with a 'better' script that stretches my level of expertise.
I'm willing to accept criticism and corrections if they improve my understanding,
but please show me the errors of my ways rather than a brief (incomplete sentences) remarks of your
'Pity.' of my attempts to participate in this forum.
okay, this works in my 3 browsers, but it might be a bit hacky for some people:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>autoMonth</title><script type="text/javascript" language="javascript">
// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// reorders a select element given by selectForm so that the first element is the current month and the rest of the months are in order
function autoMonth(selectForm){
// get the month
var month = new Date().getMonth();
// store the options for reordering
var optionsArray = [];
// populate the optionArray
for (var o=0; o<12; o++){
optionsArray.push([selectForm.options[o].value, selectForm.options[o].text]);
}
// set the options in the select list: starting at the current month
for (var m=month; m<month+12; m++){
// set this month as an option
var curOption = selectForm.options[m-month];
curOption.value = optionsArray[m%12][0];
curOption.text = optionsArray[m%12][1];
}
// selectForm.options[0].value = optionsArray[month];
selectForm.options[0].selected=true;
}
// set the select form to reorder when the window loads
addLoadEvent(function(){
autoMonth(document.getElementById("monthSelect"));
});
</script></head><body><form name="f1" action="#"><fieldset><legend>Select Month</legend><select name="s1" id="monthSelect"><option value="0">January</option><option value="1">February</option><option value="2">March</option><option value="3">April</option><option value="4">May</option><option value="5">June</option><option value="6">July</option><option value="7">August</option><option value="8">September</option><option value="9">October</option><option value="10">November</option><option value="11">December</option></select></fieldset></form></body></html>
also, it currently doesn't work if you have other attributes on your select tags
Reply With Quote
Originally Posted by Fang
).
Bookmarks