获取下拉信息的按钮
Button that gets drop down info
我创建了一个下拉菜单,可以用javascript作为日历。我正在尝试设置一个按钮,这样当单击它时,id"日期"将显示当前选择的年、月和日。但是按钮什么也没用。我相信我已经正确设置了该功能,但它不起作用,我怀疑它的位置不正确。有人能帮我编辑代码吗??
随意摆弄我的小提琴。。http://jsfiddle.net/FQnEy/
以下是我尝试过的。。。
<html>
<head>
<title>Life Event Picker Calendar</title>
</head>
<body>
<div id="date">Date</div>
<div id="event">Event</div>
Life Event Picker Calendar<br>
<hr align="left" width="200px"/>
--Year ------ Month ----- Day<br>
<div id="calendar-container"></div>
<br>Event: <input type="text" name="evname" /><br />
<button onclick="getInfo()"type="button">Click Me!</button>
<script type="text/javascript">
function getInfo() {
document.getElementById("date").innerHTML = sel_year.value + sel_month.value + sel_day.value;
}
(function() {
//variables and values for years
var yr1 = 2011, yr2 = 2012, yr3 = 2013, yr4 = 2014;
var years = [yr1, yr2, yr3, yr4];
//array with months and associated days
var calendar = [
["January", 31],["February", 28],["March", 31],["April", 30],["May", 31],["June", 30],["July", 31],["August", 31],["September", 30],
["October", 31],["November", 30],["December", 31]],
//this is the variable that accesses the content
cont = document.getElementById('calendar-container');
//creates the element variables for the drop downs
var sel_year = document.createElement('select'), sel_month = document.createElement('select'), sel_day = document.createElement('select');
function createOption(txt, val) {
//this creates the option but it seems that it is making the value -1 than what the text node is
var option = document.createElement('option');
option.value = val;
option.appendChild(document.createTextNode(txt));
return option;
}
//creates the values and text drop down values for years
function createYearOption(val) {
var option = document.createElement('option');
option.value = val;
option.appendChild(document.createTextNode(val));
return option;
}
//this clears any elements for days, months, years
function clearChildren(ele) {
while (ele.hasChildNodes()) {
ele.removeChild(ele.lastChild);
}
}
//this function is only triggered when you recalculate the months
function recalculateDays() {
var year_index = sel_year.value;
var month_index = sel_month.value,
df = document.createDocumentFragment();
if ((month_index == 1) && (year_index % 4 == 0)) {
for (var i = 0, l = calendar[month_index][1]; i < l + 1; i++) {
//the first variable is what number will be displayed in the day drop down
df.appendChild(createOption(i + 1, i + 1));
}
} else {
//l is the variable for the number of days in the month from the array above ex:28, 30, 31
for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
//the first variable is what number will be displayed in the day drop down
df.appendChild(createOption(i + 1, i + 1));
}
}
clearChildren(sel_day);
sel_day.appendChild(df);
}
//this function is triggered only when you change the year
function recalculateDays2() {
var month_index = sel_month.value,
df = document.createDocumentFragment();
year_index = sel_year.value;
//this checks to see if the month selected is Feb and the year is a leap year
if ((month_index == 1) && (year_index % 4 == 0)) {
//l is the variable for the number of days in the month from the array above ex:28, 30, 31
for (var i = 0, l = calendar[month_index][1]; i < l + 1; i++) {
//the first variable is what number will be displayed in the day drop down
df.appendChild(createOption(i + 1, i + 1));
}
//if not a leap year and not Feb give values of normal year to all months
} else {
for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
//the first variable is what number will be displayed in the day drop down
df.appendChild(createOption(i + 1, i + 1));
}
}
clearChildren(sel_day);
sel_day.appendChild(df);
}
//this creates the month values
function generateMonths() {
var df = document.createDocumentFragment();
for(var i=0; i<calendar.length; i++) {
df.appendChild(createOption(calendar[i][0], i));
}
//clears past months
clearChildren(sel_month);
//appends new months onto variable df
sel_month.appendChild(df);
}
//this creates the year values
function generateYears() {
var df = document.createDocumentFragment();
for(var i=0; i<years.length; i++) {
df.appendChild(createYearOption(years[i]));
}
//clears past months
clearChildren(sel_year);
//appends new months onto variable df
sel_year.appendChild(df);
}
//anytime the month selector is changed this calls the function to change the days
sel_month.onchange = recalculateDays;
sel_year.onchange = recalculateDays2;
//runs the months and days functions
generateMonths();
generateYears();
recalculateDays();
//this is what displays each of the individual drop downs after everything has been done to them
cont.appendChild(sel_year);
cont.appendChild(sel_month);
cont.appendChild(sel_day);
}());
</script>
</body>
</html>
年、月和日变量的范围是错误的。您需要将它们拉出,如jsFiddle示例中所示。
相关文章:
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 将文本框/单选按钮/和下拉列表中的信息添加到dataTable
- 数据应该只显示与我单击的按钮有关的信息
- 在谷歌地图的信息窗口内点击按钮
- 获取下拉信息的按钮
- HTML5数据库保存了详细信息以及一个按钮
- DataTable没有显示分页按钮和记录信息-JQuery
- 向HTML页面添加按钮,更新表格信息
- 如何获取facebook登录按钮的范围信息
- 单击按钮时如何将信息加载到另一个页面
- 使用带有哈希标签的链接处理类似Facebook的按钮信息(标题和图像)
- Datatables服务器端信息+带2个按钮的静态列
- jQuery click()多次输出错误按钮的信息
- 保存按钮未附加到右侧信息窗口,谷歌地图
- 刷新所有信息返回按钮按下:RubyonRails
- 按钮,显示 PHP 中表的选定行的完整信息
- 运行代码以在Android应用程序中单击javascript按钮?尝试在页面上抓取回复按钮联系信息 craigslist
- 为 Google 地图信息框创建自定义关闭按钮