0

javascriptで作成されたhtml selectから年を取得しようとしていますが、データを読み取るはずの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 イベントで実行されます。私は何を間違っていますか？

4

2 に答える 2

4

選択にオプションの配列が含まれている場合、選択の値にアクセスしています。必要なのは、select の値ではなく、選択された optionの値です。

次のようなものが必要です。

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

しかし、それは醜い男です。Benjamin Gruenbaum が提案したことを実装し、このコードをハンドラーに移動して、作成中の Javascript をより適切に維持 (および読み取り) できるようにする必要があります。そこからのデータが必要です。

編集

私はあなたのコードを JSFiddle に放り込んで遊んでみました。私が見ることができるのは、あなたの選択がから返されているフォームオブジェクトの一部ではないことです。document.forms["cal_form"]これは、Javascriptを介してフォーム全体を生成する必要があるか、要素へのアクセス方法を変更する必要があることを示していますid名前の代わりに ( document.getElementByID("id").

また、ビルドされた HTML の文字列を追加するために「innerHTML」を使用しないことをお勧めします。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;
于 2012-07-05T16:59:25.180 に答える
0

問題は HTML にあります。

あなたはそれをすることはできません

次の変更を加えると動作します。その理由は。HTMLフォームが間違っていると、適切なレイアウトが得られないため、新しい要素を追加できません。

違う：

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

        </form>
    </table>

これをに変更

<form name="cal_form">
  <table>

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


  </table>
</form>
于 2012-07-05T17:07:46.847 に答える