javascriptで簡単なパスワードを要求したい

前提・実現したいこと

javascriptを使った簡単なパスワード制を作っています。ＰＣでは問題なく動きますが、スマホ（iPhone）からだと動きません。(PCからだと一回目の入力ではページに移動せず、二回目以降に移行します。スマホからだと正しいバスワードを入力してもそのページに留まり、移動しません)

他のローディングなどのJavaScriptは問題なく動いています。
ソースコードの何が問題なのかご教授ください。
※パスワードの脆弱性についてはこの際関係なので触れなくて大丈夫です。

該当のソースコード

HTML
1<form action="#">
2      <input type="text" id="password" value="">
3      <input type="submit" onclick="pass()" value="password">
4</form>

javascript
1// pass
2function pass() {
3    var input_password = document.getElementById("password").value;
4    if (input_password == "12345"){
5        window.location.href = "example.html";
6        return false;
7    }
8}

試したこと

javascript
1function pass() {
2    var input_password = document.getElementById("password").value;
3    if (input_password == "12345"){
4        alert('${input_password}: ${input_password == "12345"}');
5        window.location.href = "example.html";
6        return false;
7    }
8}

パスワードを入力し、ボタンを押したところiPhone(Safari)　PC（Firefox）共にアラートは出ましたがロケーションはしませんでした。

調べて色々試したけれどよくわかりませんでした。お助けください。よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Firefox最新バージョン // iOS 13.5.1 Safari　604.1,　Google Chrome

　他に使っているスクリプトなど

javascript
1// page loader
2(function(){
3    $(window).on('load', function() {
4        $('.page-loader').delay(350).fadeOut('slow');
5    }); 
6})(jQuery);
7
8// pagetop button
9$(function() {
10    var topBtn = $('#page-top');
11    topBtn.hide();
12    $(window).scroll(function() {
13        if ($(this).scrollTop() > 300) {
14            topBtn.fadeIn();
15        } else {
16            topBtn.fadeOut();
17        }
18    });
19    topBtn.click(function() {
20        $('body,html').animate({
21            scrollTop: 0
22        }, 500);
23        return false;
24    });
25});
26
27// smooth scroll
28$(function(){
29    $('.s-scroll').click(function() {
30        var speed = 500;
31        var href= $(this).attr("href");
32        var target = $(href == "#" || href == "" ? 'html' : href);
33        var position = target.offset().top;
34        $("html, body").animate({scrollTop:position}, speed, "swing");
35        return false;
36    });
37});

m.ts10806

2020/09/29 15:26

そもそもコードの中にパスワード埋め込んだら、見ようと思ったら見れてしまいますが、それは良いのでしょうか。あと、iPhoneでもFirefoxで動作させようとしているのでしょうか。

erp

2020/09/29 15:28

本当に簡単なものを作りたいのでそれはいいのです。すみません。iPhone 13.5.1です。

m.ts10806

2020/09/29 15:29

>iPhone 13.5.1です。それはiOSのバージョンではないでしょうか。現象確認できるブラウザの種類とバージョンを聞いています。質問本文に追記してください。

erp

2020/09/29 15:38

すみません、よくわかっていませんでした。記入しました。

Zuishin

2020/09/29 21:50 編集

> if (input_password == "12345"){ この前後に次のように入れて確かめてみてください。 alert(`${input_password}: ${input_password == "12345"}`); もちろん、これで開発意図通りに動くわけではありません。なぜ動かないかを調べるためのコードの最初の一つです。この結果によってこの後の行動が分岐します。結果というのは「うまく動いたか動かないか」の二択ではなく、どのタイミングで何が何回表示されたかという一連の情報です。

Hogeike

2020/09/30 00:18 編集

> ＰＣでは問題なく動きますが、スマホ（iPhone）からだと動きません。何を見てスマホでは動かないと判断したのかを教えてください。他の関数は動いているのにPW部分だけ動かないとか、そもそもPWを入力できないとか、状況がわかりませんスマホで見た時のブラウザの設定で、JavaScriptが有効でない可能性もありますので、他の関数が動いているかは重要です。

Zuishin

2020/09/30 03:06

私のコメントの後のコメントに質問編集で返信がありました。やれと言われたことをやらないならそりゃ動かないでしょうねとしか。

erp

2020/09/30 05:02

alert(`${input_password}: ${input_password == "12345"}`); アラートはスマホ、PCどちらからでも出ました。ロケーションはしません。

Zuishin

2020/09/30 05:06

> 結果というのは「うまく動いたか動かないか」の二択ではなく、どのタイミングで何が何回表示されたかという一連の情報です。

Hogeike

2020/09/30 05:11

そちらでデバッグができないのなら、せめて同じ状況を再現できるソース全体を貼っていただけないですか？

m.ts10806

2020/09/30 05:18

どういう結果が出たか報告しないと次のアドバイスはありません。

Zuishin

2020/09/30 10:41

回答がついたから回答者にサポートさせることにしたんでしょう。

行動規範の内容に同意します

回答1件

ベストアンサー

<input type="submit" onclick="pass()" value="password"> ↑これを ↓こうすると良さそうです。 <input type="button" onclick="pass()" value="password"> iphoneのシミュレーターで試したところうまく行きました。質問に記載されているコードも試しましたが、PCでもシミュレーターでも動作しませんでした。

以下のコードは自作したセキュリティー度外視のほぼ同じ動きをするコードです。
何か参考になるかもしれませんので置いておきます。
12345 で teratail
45678 で google
パスワードが違う場合はそのことが表示されるように作成しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        span {
10            display: block;
11        }
12
13        span:last-of-type {
14            display: none;
15        }
16
17        .show {
18            display: block !important;
19        }
20    </style>
21</head>
22
23<body>
24
25    <span>パスワードを入力してください</span>
26    <input type="text" id="inputPass">
27    <button type="button" id="passCheckBtn">OK！！</button>
28    <span>パスワードが違います。</span>
29    <script>
30        const inputPass = document.getElementById("inputPass");
31        const passCheckBtn = document.getElementById("passCheckBtn");
32        passCheckBtn.addEventListener("click", () => {
33            switch (inputPass.value) {
34                case "12345":
35                    location.href = "https://teratail.com/";
36                    break;
37                case "45678":
38                    location.href = "https://google.com/";
39                    break;
40                default:
41                    document.getElementsByTagName("span")[1].classList.add("show");
42                    break;
43            }
44        });
45    </script>
46
47</body>
48
49</html>

投稿2020/09/30 03:15

Jon_do

総合スコア1373

erp

2020/09/30 10:15

ありがとうございます。試してみたところ、 passCheckBtn.addEventListener("click", () => { ここに ERROR：Parsing error : unexpected token ) とエラーが出て、PC、iPhone共に間違ったパスワードを入れても、正しいパスワードを入れても変化がありませんでした。

Jon_do

2020/09/30 10:56

こちらでもう一度確認しましたが、エラーは出ませんでした。コピペミスか、arrow関数に対応してないIEなどを使用しているかのどちらかかと思います。 codepenにもアップロードしましたので試してみてください。 https://codepen.io/stand-up-stone/pen/abNrKMq

erp

2020/10/01 01:13

bracketsのコンソールにはエラーが出ているのですが、無視してサーバーに上げてみたところ、思うような結果が得られました。ありがとうございました。

行動規範の内容に同意します