前提・実現したいこと
ここに質問の内容を詳しく書いてください。
<前提の説明>
javascriptで生年月日入力欄をつくり、入力された日付の曜日を出力できるようにする。
入力欄は年、月、日の3つに分ける。「曜日を調べる」というボタンをつくる。
フォーカスを外すとエラー文がでるようにし、曜日を調べるボタンを押せなくする。
どこかの入力欄が不適切であればボタンが押せない。
問題文はこんな感じ。
(1)formで入力された日付の曜日を表示する
HTMLで下記の入力フォームを作る
[数値]年 [数値]月 [数値]日←入力部、フォーカスが外れたら入力チェックを行い間違っていたら
ここにエラー表示
[調べる]←ボタンがクリックされたら(ボタンは、エラーなど入力がきちんとされていない場合は押せないようにして下さい)
結果:○曜日です←結果が表示される。
<作業経過>
日付入力して曜日が出力されるとこまでできた。(うるう年も考慮して)
方法はif文の中にif文を書いてやりました。
<わからない所、質問したいところ>
3つの入力欄があるのですが、一つ入力すると他の二つが空欄のため、間違った表記と判断しエラー文が先にでてしまう。エラー分は入力欄が空欄のときはでないようにしたい。if文で年、月、日の入力欄のどれかが空欄ならばボタンを押せなくする。という
条件にし、エラー文がでるという条件は付けないようにしたのですが、違うif文に飛びエラー文がでてしまう。
うるう年がなければif文の中にif文を書かなくても出来たし、空欄部分がある際のエラー文もうまくできたのですが、うるう年を考慮するとif文の中にif文をつくる必要があり、そうすると、空欄がある際のエラーがうまくできません。
長々すみません。伝わりましたでしょうか?
下にコード乗せるので、問題点を指摘いただければと思います。
宜しくお願いします。
該当のソースコード
HTMLコード
<h1>総合課題1</h1> <p>日付を入力してください。</p> <form method="POST" action="example.cgi" name="form1" > <input type="text" style="height:30px;" style="width:20px;" id="userYear" onblur="check()" >年 <input type="text" style="height:30px;" style="width:20px;" id="userMonth" onblur="check()" >月 <input type="text" style="height:30px;" style="width:20px;" id="userDate" onblur="check()">日 <input type="button" input id="botan" value="日付の曜日を調べる" onclick="showUserWeekDay();"> </form> <p id="kekka1"></p>javascriptコード
console.log("総合課題1");
var day1 = 1;
var day2 =31;
console.log(day1);
/クリックしたときの処理/
function showUserWeekDay() {
// 曜日の配列を作る
var WeekChars = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ];
var userYear = document.getElementById("userYear").value;
var userMonth = document.getElementById("userMonth").value;
var userDate = document.getElementById("userDate").value;
// 入力された数値から日付オブジェクトを作る
var userDate = new Date( userYear, userMonth, userDate );
// 日付と曜日を表示する
kekka1.innerHTML="指定された「" +
userDate.getFullYear() + "年" +
(userDate.getMonth()) + "月" +
userDate.getDate() + "日」は、" +
WeekChars[userDate.getDay()] + "です。";
}/関数showUserWeekDay()締め/
/フォーカスをあてたときの判定/
function check(){
var field = document.getElementById('botan');
var userYear = document.getElementById("userYear").value;
var userMonth = document.getElementById("userMonth").value;
var userDate = document.getElementById("userDate").value;
var saniti=userDate>=1&&userDate<=31 &&
userMonth==1||userDate>=1&&userDate<=31 && userMonth==3||
userDate>=1&&userDate<=31 &&
userMonth==5||userDate>=1&&userDate<=31 && userMonth==7||
userDate>=1&&userDate<=31 &&
userMonth==8||userDate>=1&&userDate<=31 && userMonth==10||
userDate>=1&&userDate<=31 && userMonth==12
varsanzero=1<=userDate&&userDate<=30&&userMonth==4||
1<=userDate&&userDate<=30&&userMonth==6||
1<=userDate&&userDate<=30&&userMonth==9||
1<=userDate&&userDate<=30&&userMonth==11
質問したいif文のところ。
if(userYear==""||userMonth==""||userDate==""){
field.setAttribute("disabled", "disabled");}
else{console.log("空欄なし");
field.removeAttribute("disabled"); }
if(userYear>=1900&&userYear<=2050){
if(userMonth==2){
if(userYear % 400 == 0 || (userYear % 100 != 0 && userYear % 4 ==
0)){
if(userDate>=1 && userDate<=29){
console.log("2月うるう年");
field.removeAttribute("disabled");}
else{console.log("日付エラー");}
}else{console.log("うるうどしではない");}
}else if(saniti){console.log("31日の月");}
else if(sanzero){console.log("30日の月");}
else{console.log("月日エラー");}
}else{console.log("年エラー");
field.setAttribute("disabled", "disabled");}
}/関数締め/
/**フォーカスをあてる前にボタンを押せなくする処理**/ var userYear = document.getElementById("userYear").value; var userMonth = document.getElementById("userMonth").value; var userDate = document.getElementById("userDate").value; var field = document.getElementById('botan'); if(userYear==""|| userMonth=="" ||userDate==""){ field.setAttribute("disabled", "disabled"); }else{ field.removeAttribute("disabled");}
回答5件
あなたの回答
tips
プレビュー