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

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

ただいまの
回答率

90.34%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 886

kuroishi

score 30

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

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


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+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(/^.+@daigaku.jp$/)がシステムエラーを発生させます。その結果、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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/05 17:11

    回答ありがとうございます。あらため以下のように改変してみました。
    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/&quot;
    }
    これで、おおよそは・・・なんですが。
    macで動作確認を行った際、PCによって

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

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

    よろしくお願いします。

    キャンセル

  • 2017/04/05 18:15

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

    キャンセル

  • 2017/04/07 14:04

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

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/05 17:11

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

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る