inputに入力した値を受け取りたい

###前提・実現したいこと
javascriptを使ってログイン画面を作成しようと考えています。
inputを使用して、ログインの制御をしたいのですが、
なかなかうまくいきません。
ifの結果がすべてfalseで吐き出されます。*値があっていても。

###該当のソースコード

javascript
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>a</title>
6    <link rel="stylesheet" href="css/style.css">
7  </head>
8  <body>
9    <h1 class="loginln">fafafa<br>WAY</h1>
10    <div class="zenbu">
11      <div class="idid">
12        ID<input type="text" id="logid" value="">
13      </div>
14      <div class="passpass">
15        PassWord<input type="text" id="pass" value="">
16      </div>
17    </div>
18    <p id="btn">LOGIN</p>
19    <p id="result"></p>
20  </body>
21
22  <script>
23    (function(){
24      'use strict';
25
26      var log = document.getElementById('logid');
27      var pass = document.getElementById('pass');
28      var btn = document.getElementById('btn');
29      var result = document.getElementById('result');
30      var ans1 = 'jt';
31      var ans2 = 'abc';
32
33      btn.addEventListener('click', function(){
34        var log = logid.value;
35        var pas = pass.value;
36        var ans1 = 1;
37        var ans2 = 1;
38
39        if (log === 1) {
40          location.href = 'jt-top.html';
41        } else {
42          result.innerHTML = 'ID、またはPassWordに誤りがあります。';
43        }
44      });
45    })();
46  </script>
47</html>

coco_bauer

2016/07/06 08:40

btn.addEventListenerの中で、var log = logid.value;としていますが、logidという変数の定義がどこにもありません。　var logid = document.getElementById('logid');ではないでしょうか？　yohira0616さんの指摘と併せて、修正すべきかと思います。

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

回答5件

JavaScriptにおける===は「型、値が両方あっている」ときにtrueを返します。

html
1<input type="text" id="logid" value="">

に対して、

javascript
1var log = document.getElementById('logid').value

はおそらくString型になりますが、if文の中で比較されている左辺の値は数値型です。
なので、一見trueを返すようでもfalseを返します。

if (log === '1')

としてみてはいかがでしょうか。

投稿2016/07/06 08:31

yohira0616

総合スコア255

meta0804

2016/07/06 08:36

ご回答ありがとうございます。上記内容で試してみましたが、やはりfalseが返されてしまいます。。。

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

ベストアンサー

実際僕にもよくわかりませんが、<input> の値の取得をするためには、
あらかじめ <form></form> で囲っておく必要があったかと思います。

ということでまず最初の修正は、<input> を <form></form> で囲います。

HTML
1<body>
2  <h1 class="loginln">fafafa<br>WAY</h1>
3  <div class="zenbu">
4
5    <form id="userInform"> <!-- ←新たに追加しました -->
6      <div class="idid">
7        ID<input type="text" id="logid" value="">
8      </div>
9      <div class="passpass">
10        PassWord<input type="text" id="pass" value="">
11      </div>
12    </form> <!-- ←新たに追加しました -->
13
14  </div>
15  <p id="btn">LOGIN</p>
16  <p id="result"></p>
17</body>

そして、<input> の値の取得の仕方は、

JavaScript
1var test = document.forms.(formId).(inputId).value

※上のコードのコピペは動きません

ですので、

JavaScript
1btn.addEventListener('click', function(){
2  var log = document.forms.userInform.logid.value * 1;
3  var pas = document.forms.userInform.pass.value * 1;
4  var ans1 = 1;
5  var ans2 = 1;
6
7  if (log === 1) {
8    location.href = 'jt-top.html';
9  } else {
10    result.innerHTML = 'ID、またはPassWordに誤りがあります。';
11  }
12});

という風に、btn.addEventListenerの中身を書き換えてみます。

質問者様が必要としている、id、passが何の型なのかがわかりませんのでした。
if が数値で場合分けされていたので、一応数値だけに対応しておくようにします。
そのために、

JavaScript
1var log = document.forms.userInform.logid.value * 1;
2var pas = document.forms.userInform.pass.value * 1;

としてあります。

JavaScript では、 *1 や /1、~~ などでエラーなく数値に変換できれば、
文字列型でも数値型に変更されます。あ、全角文字列には対応してないと思います。
よくわかりません。

このように修正してみると、うまい具合に動きます。

あとは、不必要なdocument取得をしている部分を取り除いて、まとめます。
修正後のコードは以下のようになります。
※GoogleChromeでローカル環境で実行しました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>a</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 class="loginln">fafafa<br>WAY</h1>
    <div class="zenbu">

      <form id="userInform"> <!-- ←新たに追加しました -->
        <div class="idid">
          ID<input type="text" id="logid" value="">
        </div>
        <div class="passpass">
          PassWord<input type="text" id="pass" value="">
        </div>
      </form> <!-- ←新たに追加しました -->

    </div>
    <p id="btn">LOGIN</p>
    <p id="result"></p>
  </body>

  <script>
    (function(){
      'use strict';

      var btn = document.getElementById('btn');
      var result = document.getElementById('result');
      var ans1 = 'jt';
      var ans2 = 'abc';

      btn.addEventListener('click', function(){
        var log = document.forms.userInform.logid.value * 1;
        var pas = document.forms.userInform.pass.value * 1;
        var ans1 = 1;
        var ans2 = 1;

        if (log === 1) {
          location.href = 'jt-top.html';
        } else {
          result.innerHTML = 'ID、またはPassWordに誤りがあります。';
        }
      });
    })();
  </script>
</html>

投稿2016/07/09 23:20

編集2016/07/09 23:22

glapd332

総合スコア75

何も入力されていない時は空文字("")が取得されるのでそのバリテーションを行えばよいです。
あとidとpassはどちらも入力されていないとログインができないと思うので
そのバリテーションを追加しておきました。
動くと思います。ご確認お願いいたします。

if (log != "" && pass!="") {
  location.href = 'jt-top.html';
}

投稿2016/07/09 07:58

yryuu

総合スコア151

変数が再定義されているのが気になります。
他の回答者様の提示した方法を試してもfalseが返ってくるとのことですが、IDのinputには何を入力してらっしゃいますか？
ans1に最初に指定されている『jt』ではなく、半角数字の『1』を入力すればちゃんとページ遷移します。

IDをans1、パスワードをans2で指定した値でログインさせる場合は下記でOKです。

JavaScript
1    document.getElementById('btn').addEventListener('click', function(){
2      var logid = document.getElementById('logid').value;
3      var pass = document.getElementById('pass').value;
4      var ans1 = 'jt';
5      var ans2 = 'abc';
6      
7      console.log(logid);
8
9      if (logid === ans1 && pass === ans2) {
10        location.href = 'jt-top.html';
11      } else {
12        result.innerHTML = 'ID、またはPassWordに誤りがあります。';
13      }
14});

投稿2016/07/06 09:18

編集2016/07/06 09:30

sunagimochan

総合スコア12

こんにちは！

私も初心者ですが。ただ、私も見たことがあるエラーなので。

ちょっと意見を話したいとおもいます。

まず、問題の部分は

if (log == 1) {　//または log === '1'
  location.href = 'jt-top.html';
} else {
  result.innerHTML = 'ID、またはPassWordに誤りがあります。';
}

この部分ですね。もともとは

if(log === １)

でしたけど。この時 log変数がもっているデータはStringです。

でも１はnumber(int)なので、できなかったと思います。

それで === ではなく == がいいと思います。

=== と == を使う時、データ刑を確認することが必要だとおもいます！

投稿2016/07/06 08:38

編集2016/07/06 08:45

退会済みユーザー

総合スコア0

退会済みユーザー

2016/07/06 08:40

console.log(typeof log); console.log(typeof 1); のようにテストしてみるとデータ刑を確認するのができます。 (私はテストする時chomeでF12を押して開発者モードで確認します）

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

inputに入力した値を受け取りたい

関連した質問