Question

我试图从javascript创建的html中获取年份但是应该读取数据的javascript函数无法找到它。

以下是index.html的代码

<html>
<head>
    <SCRIPT language="JavaScript" SRC="./js/calendar.js"></SCRIPT>
</head>

<body onload="yearList()">
    <div id="form">
        <table>
            <form name="cal_form">
                <tr>
                    <td>Month:</td>
                    <td>
                        <select name="month">
                            <option value="January">January</option>
                            <option value="February">February</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="August">August</option>
                            <option value="September">September</option>
                            <option value="October">October</option>
                            <option value="November">November</option>
                            <option value="December">December</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Year:</td>
                    <td id="yearoptiondiv">

                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button type="button" onclick="drawCalendar(gen_cal_settings())">Draw Calendar</button> 
                    </td>
                </tr>


            </form>
        </table>
    </div>
    <div id="calendar"></div>
</body>

这是calendar.js的代码

function drawCalendar(cal_settings){
var calendarTable;

calendarTable += '<table>';
calendarTable += '<tr>';
calendarTable += '<td colspan="2">';
calendarTable += cal_settings["month"] + " " + cal_settings["year"];
calendarTable += '</td>';
calendarTable += '</tr>';
calendarTable += '</table>';
document.getElementById("calendar").innerHTML=calendarTable;
}

function yearList(){
var x="",i;
x += "<select name='year'>";
for (i=2011;i<=3012;i++)
{
    x += "<option value='" + i + "'>" + i + "</option>";
}
x += "</select>";
document.getElementById("yearoptiondiv").innerHTML=x;
}

function gen_cal_settings(){
var cal_settings = new Array(); 
cal_settings["month"]=document.forms['cal_form']['month'].value;     
cal_settings["year"]=document.forms['cal_form']['year'].value;   
return cal_settings;    
}

年份列表在页面正文的onload事件中运行。我做错了什么？

Answer 1

当select包含一组选项时，您正在访问select的值。您需要的是所选选项的值，而不是选择的值。

你想要的东西是：

document.forms["cal_form"]["year"].options[document.forms["cal_form"]["year"].selectedIndex].value

但是丑陋的男人。您应该尝试实现Benjamin Gruenbaum建议的内容，并将此代码移动到一个处理程序中，以便您更好地维护（和读取）您正在编写的Javascript，这将允许您引用表单而不是每次从Document访问它需要来自它的数据。

编辑

我把你的代码扔进JSFiddle并玩它。我可以看到你的select不是从document.forms["cal_form"]返回的表单对象的一部分，这告诉我你需要通过Javascript生成整个表单，或者你需要改变你访问的方式元素，可能是id而不是名称（使用document.getElementByID("id")。

我还建议不要使用“innerHTML”来添加构建HTML的字符串。我建议通过DOM构建元素，例如您的yearList函数，如下所示：

function yearList(){
  var select, option, year;
  select = document.createElement("select");
  select.setAttribute("name", "year");
  select.setAttribute("id", "year"); // For use accessing by ID and not name
  for (i = 2011; i <= 3012; ++i)
  {
    option = document.createElement("option");
    option.setAttribute("value", year);
    option.innerHTML = year;
    select.appendChild(option);
  }
  document.getElementById("yearoptiondiv").appendChild(select);
}

然后当您需要访问该值时：

document.getElementById("year").value;

Answer 2

问题在于HTML。

你不能拥有然后

进行以下更改，它会起作用。原因是。当你有错误的HTML表单没有得到适当的布局，所以你不能添加新的元素。

错：

<table>
        <form name="cal_form">
            ..............
            ..............
            ..............

        </form>
    </table>

将此更改为

<form name="cal_form">
  <table>

            ..............
            ..............
            ..............


  </table>
</form>

无法从Javascript生成的表单中获取数据

2 个答案: