Javascriptを用いた簡易なログインシステム

Question

こんにちは。今回Javascriptについて質問させてください。
私はまだまだアマチュア故、見よう見まねで今回javascriptに挑戦しました。
以下が今回作成したプログラムになります。

function check(){
    var check = false;
    for(i=0;i<100;i++){
        var pass=prompt("メールアドレスを入力してください","");
        if(pass.match(/^[e-mail]$/)){
            check=true;
            location.href="アンケート先へ";
        }
        alert("5秒お待ちください。画面が変わらない場合メールアドレスが違います\n");
    }
    if(check==false)
        location.href="https://www.yahoo.co.jp/";
}

といった形です。
やりたい内容としては学生向けに一応ということで学生メールアドレスでアンケートに向かわせる形にしようと組みました。
これでやると、問題点は以下です
・Macでのログインはなぜかできない
・キャンセルを押すとyahooのページでなくアンケート進んでしまう。
といった問題が生じます。本当にいろいろわからないことが多いので教えていただけたらと思います。
よろしくお願いします。

Answer 1

Macでのログインはなぜかできない

alertは警告ダイアログを出してプログラムの実行をOKボタンが押されるまで止める命令です。警告メッセージを出している間に別のページに遷移するといった使い方は想定されていません。
そういった動きをするかどうかはブラウザごとに違うのではないかと思います。

location.href="アンケート先へ";の後にreturn;を置いて処理を終了させる動作にするとよいでしょう。

---

キャンセルを押すとyahooのページでなくアンケート進んでしまう。

<a href="https://www.yahoo.co.jp/" onclick="check();">link</a>のような呼び出し方をしていませんか？

キャンセルを押されたとき、prompt()はnullを返すのでpassにはnullが代入されます。そしてnullはmatchメソッドを持たないためにpass.match(/^[e-mail]$/)がシステムエラーを発生させます。その結果、javascriptの実行は中断されてしまいます。

javascriptの実行がエラーで中断されたあと、Aタグ本来の動作でリンク先にページ遷移してしまっているのではないかと思います。

対策としては、イベントハンドラが戻り値でfalseを戻した場合はその要素が本来の動作を行わなくなりますので、それを利用するのがよいでしょう。以下の例を参考にしてみてください。

<script>
function checkTest() {
  var result = confirm("進みますか？")
  if (result == true) {
    return true; // Yesが選択されたときはtrueを戻して本来の動作をさせる
  } else {
    return false; // Noが選択されたときはfalseを戻して本来の動作をさせない
  }
}
</script>

<a href="https://www.yahoo.co.jp/" onclick="return checkTest();">link</a>

Comments

[kuroishi]

回答ありがとうございます。あらため以下のように改変してみました。
function check(){
for(i=0;i<3;i++){
var pass=prompt("あなたの学校で使用しているメールアドレスを入力してください","");
if(pass.match(/^.+@daigaku$/)){
location.href="アンケート先";
alert("少しお待ちください。");
}
else if(pass !=null){
alert("メールアドレスが違います");
}
}
location.href="https://www.yahoo.co.jp/"
}
これで、おおよそは・・・なんですが。
macで動作確認を行った際、PCによって

「少しお待ちください」が表示→アンケート先に進まない→okボタン押してみる→またpromptの画面へ→キャンセルボタンを押すとアンケート先に進む

とゆうようなエラーが出てしまいます。
通常キャンセルを押すとページに戻るのですが・・・

よろしくお願いします。

[ku__ra__ge]

えーと、ですから『alertは、警告メッセージを出している間に別のページに遷移するといった使い方を想定されていない』んです。
どうしても「少々お待ち下さい」といった文字をユーザに見せたいなら、HTML上にメッセージ表示用の要素を用意しておき、その内容を書き換えて表示するべきです。
元の質問から外れるので細かいことは説明しませんが以下のような感じです。
<div id="msg"></div>
<script>document.getElementById("msg").innerHTML = "少々お待ちください";</script>

[kuroishi]

ありがとうございます！
大変参考になりました！

Answer 2

function check(){
    var check = false;
    for(i=0;i<100;i++){
        var pass=prompt("メールアドレスを入力してください","");
        //キャンセルするとpromptはnullを返す
       //nullのmatchはないのでここでなにそれ？っていうのがでるので
       //ここで止まってた
         if(pass.match(/^[e-mail]$/)){
            check=true;
            location.href="アンケート先へ";
        }
        alert("5秒お待ちください。画面が変わらない場合メールアドレスが違います\n");
    }
    if(check==false)
        location.href="https://www.yahoo.co.jp/";
}

ChromeのデベロッパーツールでJSをデバッグする方法(入門編) - ICS MEDIA

Comments

[kuroishi]

ご回答ありがとうございます！
nullについてはわかりました、ありがとうございました！