質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1286閲覧

selectの子要素を取れない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/12/01 14:37

selectの子要素を取りたいのですが、
Uncaught ReferenceError: horizontal is not defined
at index:278
(anonymous) @ index:278   とエラーが出ます。
index.htmlに

{% load staticfiles %} <html lang="ja"> <head> <meta charset="utf-8"> <body> <h1 class="title">WEBSITE</h1> {% include 'date.html' %} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var num0 = document.form-horizontal.year.selectedIndex; var year = document.form-horizontal.year.options[num0].value;   var num1 = document.form-horizontal.month.selectedIndex; var month = document.form-horizontal.month.options[num1].value; var num2 = document.form-horizontal.day.selectedIndex; var day = document.form-horizontal.day.options[num2].value; console.log(year); console.log(month); console.log(day); </script> </body> </html>

と書きました。date.htmlには

<form class="form-horizontal" name="yyyymmdd" method="post" action="#"> <div class="form-group-lg"> <label for="birthday">生年月日</label>
 <select class="year" name="year"> <option value="">--</option> <option value="1900">1900</option> <option value="1901">1901</option> <option value="1902">1902</option> <option value="1903">1903</option> <option value="1904">1904</option> <option value="1905">1905</option> <option value="1906">1906</option> <option value="1907">1907</option> <option value="1908">1908</option> <option value="1909">1909</option> <option value="1910">1910</option> <option value="1911">1911</option> <option value="1912">1912</option> <option value="1913">1913</option> <option value="1914">1914</option> <option value="1915">1915</option> <option value="1916">1916</option> <option value="1917">1917</option> <option value="1918">1918</option> <option value="1919">1919</option> <option value="1920">1920</option> <option value="1921">1921</option> <option value="1922">1922</option> <option value="1923">1923</option> <option value="1924">1924</option> <option value="1925">1925</option> <option value="1926">1926</option> <option value="1927">1927</option> <option value="1928">1928</option> <option value="1929">1929</option> <option value="1930">1930</option> <option value="1931">1931</option> <option value="1932">1932</option> <option value="1933">1933</option> <option value="1934">1934</option> <option value="1935">1935</option> <option value="1936">1936</option> <option value="1937">1937</option> <option value="1938">1938</option> <option value="1939">1939</option> <option value="1940">1940</option> <option value="1941">1941</option> <option value="1942">1942</option> <option value="1943">1943</option> <option value="1944">1944</option> <option value="1945">1945</option> <option value="1946">1946</option> <option value="1947">1947</option> <option value="1948">1948</option> <option value="1949">1949</option> <option value="1950">1950</option> <option value="1951">1951</option> <option value="1952">1952</option> <option value="1953">1953</option> <option value="1954">1954</option> <option value="1955">1955</option> <option value="1956">1956</option> <option value="1957">1957</option> <option value="1958">1958</option> <option value="1959">1959</option> <option value="1960">1960</option> <option value="1961">1961</option> <option value="1962">1962</option> <option value="1963">1963</option> <option value="1964">1964</option> <option value="1965">1965</option> <option value="1966">1966</option> <option value="1967">1967</option> <option value="1968">1968</option> <option value="1969">1969</option> <option value="1970">1970</option> <option value="1971">1971</option> <option value="1972">1972</option> <option value="1973">1973</option> <option value="1974">1974</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> <option value="1978">1978</option> <option value="1979">1979</option> <option value="1980">1980</option> <option value="1981">1981</option> <option value="1982">1982</option> <option value="1983">1983</option> <option value="1984">1984</option> <option value="1985">1985</option> <option value="1986">1986</option> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> </select> 年 <select class="month" name="month"> <option value="">--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> 月 <select class="day" name="day"> <option value="">--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> 日 <br> <br> </div>

 </form>

と書きました。今、年月日のドリルダウンを動かして年・月・日を

console.log(year); console.log(month); console.log(day);

で取得したいです。例えば1990年12月11日を選択したら、
console.log(year); では1990 が、
console.log(month); では12 が、
console.log(day); では11 が表示されるようにしたいです。しかし、今上記のエラーが出ています。なぜこのようなエラーが出るのでしょうか?どう直せば良いのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

以下のようにしてみてはいかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<form class="form-horizontal" name="yyyymmdd" method="post" action="#"> 9 <div class="form-group-lg"> 10 <label for="birthday">生年月日</label>
 11 <select class="year" name="year" id="birthday"> 12 <option value="">--</option> 13 <option value="1900">1900</option> 14 <option value="1901">1901</option> 15 <option value="1902">1902</option> 16 <option value="1903">1903</option> 17 <option value="1904">1904</option> 18 <option value="1905">1905</option> 19 <option value="1906">1906</option> 20 <option value="1907">1907</option> 21 <option value="1908">1908</option> 22 <option value="1909">1909</option> 23 <option value="1910">1910</option> 24 <option value="1911">1911</option> 25 <option value="1912">1912</option> 26 <option value="1913">1913</option> 27 <option value="1914">1914</option> 28 <option value="1915">1915</option> 29 <option value="1916">1916</option> 30 <option value="1917">1917</option> 31 <option value="1918">1918</option> 32 <option value="1919">1919</option> 33 <option value="1920">1920</option> 34 <option value="1921">1921</option> 35 <option value="1922">1922</option> 36 <option value="1923">1923</option> 37 <option value="1924">1924</option> 38 <option value="1925">1925</option> 39 <option value="1926">1926</option> 40 <option value="1927">1927</option> 41 <option value="1928">1928</option> 42 <option value="1929">1929</option> 43 <option value="1930">1930</option> 44 <option value="1931">1931</option> 45 <option value="1932">1932</option> 46 <option value="1933">1933</option> 47 <option value="1934">1934</option> 48 <option value="1935">1935</option> 49 <option value="1936">1936</option> 50 <option value="1937">1937</option> 51 <option value="1938">1938</option> 52 <option value="1939">1939</option> 53 <option value="1940">1940</option> 54 <option value="1941">1941</option> 55 <option value="1942">1942</option> 56 <option value="1943">1943</option> 57 <option value="1944">1944</option> 58 <option value="1945">1945</option> 59 <option value="1946">1946</option> 60 <option value="1947">1947</option> 61 <option value="1948">1948</option> 62 <option value="1949">1949</option> 63 <option value="1950">1950</option> 64 <option value="1951">1951</option> 65 <option value="1952">1952</option> 66 <option value="1953">1953</option> 67 <option value="1954">1954</option> 68 <option value="1955">1955</option> 69 <option value="1956">1956</option> 70 <option value="1957">1957</option> 71 <option value="1958">1958</option> 72 <option value="1959">1959</option> 73 <option value="1960">1960</option> 74 <option value="1961">1961</option> 75 <option value="1962">1962</option> 76 <option value="1963">1963</option> 77 <option value="1964">1964</option> 78 <option value="1965">1965</option> 79 <option value="1966">1966</option> 80 <option value="1967">1967</option> 81 <option value="1968">1968</option> 82 <option value="1969">1969</option> 83 <option value="1970">1970</option> 84 <option value="1971">1971</option> 85 <option value="1972">1972</option> 86 <option value="1973">1973</option> 87 <option value="1974">1974</option> 88 <option value="1975">1975</option> 89 <option value="1976">1976</option> 90 <option value="1977">1977</option> 91 <option value="1978">1978</option> 92 <option value="1979">1979</option> 93 <option value="1980">1980</option> 94 <option value="1981">1981</option> 95 <option value="1982">1982</option> 96 <option value="1983">1983</option> 97 <option value="1984">1984</option> 98 <option value="1985">1985</option> 99 <option value="1986">1986</option> 100 <option value="1987">1987</option> 101 <option value="1988">1988</option> 102 <option value="1989">1989</option> 103 <option value="1990">1990</option> 104 <option value="1991">1991</option> 105 <option value="1992">1992</option> 106 <option value="1993">1993</option> 107 <option value="1994">1994</option> 108 <option value="1995">1995</option> 109 <option value="1996">1996</option> 110 <option value="1997">1997</option> 111 <option value="1998">1998</option> 112 <option value="1999">1999</option> 113 <option value="2000">2000</option> 114 <option value="2001">2001</option> 115 <option value="2002">2002</option> 116 <option value="2003">2003</option> 117 <option value="2004">2004</option> 118 <option value="2005">2005</option> 119 <option value="2006">2006</option> 120 <option value="2007">2007</option> 121 <option value="2008">2008</option> 122 <option value="2009">2009</option> 123 <option value="2010">2010</option> 124 <option value="2011">2011</option> 125 <option value="2012">2012</option> 126 <option value="2013">2013</option> 127 <option value="2014">2014</option> 128 <option value="2015">2015</option> 129 <option value="2016">2016</option> 130 <option value="2017">2017</option> 131 <option value="2018">2018</option> 132 <option value="2019">2019</option> 133 <option value="2020">2020</option> 134 </select> 135136 <select class="month" name="month"> 137 <option value="">--</option> 138 <option value="1">1</option> 139 <option value="2">2</option> 140 <option value="3">3</option> 141 <option value="4">4</option> 142 <option value="5">5</option> 143 <option value="6">6</option> 144 <option value="7">7</option> 145 <option value="8">8</option> 146 <option value="9">9</option> 147 <option value="10">10</option> 148 <option value="11">11</option> 149 <option value="12">12</option> 150 </select> 151152 <select class="day" name="day"> 153 <option value="">--</option> 154 <option value="1">1</option> 155 <option value="2">2</option> 156 <option value="3">3</option> 157 <option value="4">4</option> 158 <option value="5">5</option> 159 <option value="6">6</option> 160 <option value="7">7</option> 161 <option value="8">8</option> 162 <option value="9">9</option> 163 <option value="10">10</option> 164 <option value="11">11</option> 165 <option value="12">12</option> 166 <option value="13">13</option> 167 <option value="14">14</option> 168 <option value="15">15</option> 169 <option value="16">16</option> 170 <option value="17">17</option> 171 <option value="18">18</option> 172 <option value="19">19</option> 173 <option value="20">20</option> 174 <option value="21">21</option> 175 <option value="22">22</option> 176 <option value="23">23</option> 177 <option value="24">24</option> 178 <option value="25">25</option> 179 <option value="26">26</option> 180 <option value="27">27</option> 181 <option value="28">28</option> 182 <option value="29">29</option> 183 <option value="30">30</option> 184 <option value="31">31</option> 185 </select> 186 日 <br> 187 <br> 188 </div> 189 

 190</form> 191<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 192<script> 193 function showBirth() { 194 var num0 = document.forms[0].year.selectedIndex; 195 var year = document.forms[0].year.options[num0].value; 196 var num1 = document.forms[0].month.selectedIndex; 197 var month = document.forms[0].month.options[num1].value; 198 var num2 = document.forms[0].day.selectedIndex; 199 var day = document.forms[0].day.options[num2].value; 200 console.log(year); 201 console.log(month); 202 console.log(day); 203 } 204 205 document.addEventListener("DOMContentLoaded", showBirth); 206 for (var i = 0, e = document.querySelectorAll(".form-horizontal select"); i < e.length; i++) { 207 e[i].addEventListener("change", showBirth); 208 } 209</script> 210</body> 211</html>

投稿2017/12/01 15:02

編集2017/12/01 15:09
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問