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

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

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

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

HTML

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

Q&A

解決済

2回答

5827閲覧

JavaScriptで、プルダウンを使って、うるう年判定を作りたい

Beginnerrr

総合スコア17

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/08/07 02:25

うるう年判定を作りたい

JavaScriptで、閏年かどうかを判定するプルダウンを作りたいです。
プルダウンでうるう年の2月を選択すると、29日が出てきます。
その後に別の月を入力すると30日や31日も選択出来る様になります。
しかし、別の月を洗濯した後に2月を選択しても日数のプルダウンが29日までに戻らず、30日や31日を選択出来る状態になっています。

仕様としては、選択している西暦と月のデータによって、選択できる日数が変わる様にしたい。
具体的には、「閏年の2月は29日まで選択できるが、それ以外の2月は28日までしか選択出来ない」とか
「4月や6月など30日までしか日数がない月を選択した場合は、30日までしかプルダウンされない」など。

該当のソースコード

JavaScript

1const monthCheck = function(){ 2 var year_value = document.getElementById("year").value; 3 var month_value = document.getElementById("month").value; 4 year_value = parseInt(year_value); 5 month_value = parseInt(month_value); 6 7 if(year_value%4 == 0 && month_value == 2 ){ //閏年 8 for(var i=1; i<30; i++){ 9 document.form_signin.day.options[i] = new Option(i+"日", i); 10 } 11 }else if(month_value == (1||3||5||7||8||10||12) ){ //31日の月 12 for(var i=1; i<32; i++){ 13 document.form_signin.day.options[i] = new Option(i+"日", i); 14 } 15 }else if(month_value == 2 ){ //閏年じゃない2月 16 for(var i=1; i<29; i++){ 17 document.form_signin.day.options[i] = new Option(i+"日", i); 18 } 19 }else{ //30日の月 20 for(var i=1; i<31; i++){ 21 document.form_signin.day.options[i] = new Option(i+"日", i); 22 } 23 } 24}

html

1<form name="form_signin"> 2 <select name="birthday" id="year" onchange="monthCheck()" > 3 <option value="1">--西暦--</option> 4 <option value="1980">1980年</option> 5 <option value="1981">1981年</option> 6 <option value="1982">1982年</option> 7 <option value="1983">1983年</option> 8 <option value="1984">1984年</option> 9 <option value="1985">1985年</option> 10 <option value="1986">1986年</option> 11 <option value="1987">1987年</option> 12 <option value="1988">1988年</option> 13 <option value="1989">1989年</option> 14 <option value="1990">1990年</option> 15 <option value="1991">1991年</option> 16 <option value="1992">1992年</option> 17 <option value="1993">1993年</option> 18 <option value="1994">1994年</option> 19 <option value="1995">1995年</option> 20 <option value="1996">1996年</option> 21 <option value="1997">1997年</option> 22 <option value="1998">1998年</option> 23 <option value="1999">1999年</option> 24 <option value="2000">2000年</option> 25 <option value="2001">2001年</option> 26 <option value="2002">2002年</option> 27 <option value="2003">2003年</option> 28 <option value="2004">2004年</option> 29 <option value="2005">2005年</option> 30 <option value="2006">2006年</option> 31 <option value="2007">2007年</option> 32 <option value="2008">2008年</option> 33 <option value="2009">2009年</option> 34 <option value="2010">2010年</option> 35 <option value="2011">2011年</option> 36 <option value="2012">2012年</option> 37 <option value="2013">2013年</option> 38 <option value="2014">2014年</option> 39 <option value="2015">2015年</option> 40 </select> 41 42 <select name="birthday" id="month" onchange='monthCheck(this.selectedIndex)' > 43 <option value="0">-月-</option> 44 <option value="1">1</option> 45 <option value="2">2</option> 46 <option value="3">3</option> 47 <option value="4">4</option> 48 <option value="5">5</option> 49 <option value="6">6</option> 50 <option value="7">7</option> 51 <option value="8">8</option> 52 <option value="9">9</option> 53 <option value="10">10</option> 54 <option value="11">11</option> 55 <option value="12">12</option> 56 </select> 57 <select name="birthday" id="day" > 58 <option value="0">-日-</option> 59 </select> 60</form> 61

よろしくお願いします!!!

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

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

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

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

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

guest

回答2

0

ベストアンサー

document.form_signin.dayのoptionを毎回空にしてからoption作ればできそうに思うのですが、いかがでしょうか。
今のままだと作りっぱなしで破棄してないので最大の31を作ったらそこからそれ以下にはならないようになっています。

投稿2018/08/07 02:29

編集2018/08/07 02:31
m.ts10806

総合スコア80765

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

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

Beginnerrr

2018/08/07 03:30

早速のお返事有難うございます。 私はまだ未熟者で、optionを毎回空にする方法が分かりません。 自分なりに考えて、29以上の日数を毎回削除する様に、以下のコードに書き換えたのですが、上手くいきません。 差し支えなければ、optionを毎回空にする方法を教えて頂けないでしょうか? ``` const monthCheck = function(){ var year_value = document.getElementById("year").value; var month_value = document.getElementById("month").value; year_value = parseInt(year_value); month_value = parseInt(month_value); if(year_value%4 == 0 && month_value == 2 ){ //閏年 for(var i=1; i<30; i++){ document.form_signin.day.options[31] = null; document.form_signin.day.options[32] = null; document.form_signin.day.options[i] = new Option(i+"日", i); } }else if(month_value == (1||3||5||7||8||10||12) ){ //31日の月 for(var i=1; i<32; i++){ document.form_signin.day.options[i] = new Option(i+"日", i); } }else if(month_value == 2 ){ //閏年じゃない2月 for(var i=1; i<29; i++){ document.form_signin.day.options[30] = null; document.form_signin.day.options[31] = null; document.form_signin.day.options[32] = null; document.form_signin.day.options[i] = new Option(i+"日", i); } }else{ //30日の月 for(var i=1; i<31; i++){ document.form_signin.day.options[32] = null; document.form_signin.day.options[i] = new Option(i+"日", i); } } } ```
Beginnerrr

2018/08/07 05:06

有難うございます。 お陰様で、解決出来ました。 心から感謝いたします、本当に有難うございました。
m.ts10806

2018/08/07 05:07

removeChild使われたということですよね? 解決できたようで何よりです。
Beginnerrr

2018/08/07 05:09

はい。 if文の前に以下のコードを記入しました。 var x = document.form_signin.day; if (x.hasChildNodes()) { while (x.childNodes.length > 0) { x.removeChild(x.firstChild) } }
m.ts10806

2018/08/07 05:14

はい。それで問題ないと思います。 ただ、同じ方法を表現するのにやり方は1つではありませんし、 もっとシンプルに書けるやり方もあるでしょうし、あえてすごく複雑に書いてみるというのもあるかと思います。 1つの結果に対して色々なやり方を試してみて、自分なりのやり方を確立していってください。「これが絶対の正解」というのはありませんので。
Beginnerrr

2018/08/07 08:39

ご指摘有難うございます! まだ始めたばかりの初心者なので、上記の様なコードしか書けませんが、もっと綺麗に書ける様に頑張ります!
guest

0

たとえばこうします

javascript

1window.addEventListener('DOMContentLoaded', function(e){ 2 [].forEach.call(document.querySelectorAll('#y,#m'),function(x){ 3 x.addEventListener('change',function(e){ 4 var y=document.querySelector('#y').value; 5 var m=document.querySelector('#m').value; 6 if(y==="" || m===""){ 7 document.querySelector('#d').selectedIndex=0; 8 document.querySelector('#d').disabled=true; 9 }else{ 10 var dd=new Date(y+"-"+m+"-1"); 11 dd.setMonth(dd.getMonth()+1); 12 dd.setDate(0); 13 [].forEach.call(document.querySelector('#d').options,function(x){ 14 var flg=x.value!=="" && x.value>dd.getDate(); 15 x.style.display=flg?"none":""; 16 }); 17 if(document.querySelector('#d').value>dd.getDate()){ 18 document.querySelector('#d option[value="'+dd.getDate()+'"]').selected=true; 19 } 20 document.querySelector('#d').disabled=false; 21 } 22 }); 23 }); 24});

※微調整しました

HTML

1<form name="form_signin"> 2<select name="y" id="y"> 3<option value="">--西暦--</option> 4<option value="2010">2010年</option> 5<option value="2011">2011年</option> 6<option value="2012">2012年</option> 7<option value="2013">2013年</option> 8<option value="2014">2014年</option> 9<option value="2015">2015年</option> 10</select> 11<select name="m" id="m"> 12<option value="">-月-</option> 13<option value="1">1</option> 14<option value="2">2</option> 15<option value="3">3</option> 16<option value="4">4</option> 17<option value="5">5</option> 18<option value="6">6</option> 19<option value="7">7</option> 20<option value="8">8</option> 21<option value="9">9</option> 22<option value="10">10</option> 23<option value="11">11</option> 24<option value="12">12</option> 25</select> 26<select name="d" id="d" disabled> 27<option value="">-日-</option> 28<option value="1">1</option> 29<option value="2">2</option> 30<option value="3">3</option> 31<option value="4">4</option> 32<option value="5">5</option> 33<option value="6">6</option> 34<option value="7">7</option> 35<option value="8">8</option> 36<option value="9">9</option> 37<option value="10">10</option> 38<option value="11">11</option> 39<option value="12">12</option> 40<option value="13">13</option> 41<option value="14">14</option> 42<option value="15">15</option> 43<option value="16">16</option> 44<option value="17">17</option> 45<option value="18">18</option> 46<option value="19">19</option> 47<option value="20">20</option> 48<option value="21">21</option> 49<option value="22">22</option> 50<option value="23">23</option> 51<option value="24">24</option> 52<option value="25">25</option> 53<option value="26">26</option> 54<option value="27">27</option> 55<option value="28">28</option> 56<option value="29">29</option> 57<option value="30">30</option> 58<option value="31">31</option> 59</select> 60</form>

投稿2018/08/07 03:47

編集2018/08/07 03:56
yambejp

総合スコア114572

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

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

yambejp

2018/08/07 04:03

うるう年の判定は深く考えないことです。 ようは年と月が決まれば、その翌月1日の1日前がその月の月末最終日になるので それ以外の条件は不要です
Beginnerrr

2018/08/07 04:42

すみません、私が未熟者過ぎて、yambejpさんの説明が全く理解出来ていません。 良ければもう少し分かりやすく教えて頂けないでしょうか?
yambejp

2018/08/07 04:46

たとえば2011年の2月を選ぶとします その翌月の1は2011/3/1ですよね?その1日前は2011/2/28です。 よって1~28日を表示すればよいということです。 閏年であれば2012/3/1の1日前がかっってに2012/2/29となるので 変な条件をいろいろ考える必要がないということ
Beginnerrr

2018/08/07 05:05

yambejpさん 早速のお返事ありがとうございます。 今回は、mts10806さんをベストアンサーにさせて頂きます。 yambejpさんに落ち度はありません。 具体的なコードを見せて頂いたという点では、圧倒的に親切な対応をして頂いたと感じております。 ただ、私が未熟者過ぎて、理解出来ていない表現が沢山出てきました。 私の目下の目標としましては、自分の理解出来るコードでJavaScriptを書くことです。 mts10806さんに教えて頂いた内容は私でも理解できるものでした。 ベストアンサーにしなくて本当に申し訳ございません。 親切に対応していただいたのに心苦しいですが、どうかご理解下さい。 お時間いただき有難うございました。
yambejp

2018/08/07 05:10

ベストアンサーにはこだわりがないのでほんとに気にしないでください お役に立てれば幸いです
Beginnerrr

2018/08/07 05:36

そう言っていただけて幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問