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

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

ただいまの
回答率

90.51%

  • JavaScript

    16496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ユーザーの入力に対する入力制限

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 129

shisozaki

score 4

ユーザーの入力した数字で、同じ数字を入力できないように入力制限したいです。

HTML
<input id='aaa1' type='text'>
<input id='aaa2' type='text'>
<input id='aaa3' type='text'>
<div id='bbb'></div>
<input id='click1' type='submit' value='ここをクリック'>

JS
ver bbb= document.getElementById('bbb');
ver click= document.getElementById('click1');
click.addEventListener{' click',fuction(){
arr=[];
for(i=0; i<3; i++){
arr[i]= document.getElementById('aaa' +(i + 1)).value);

for(j=0; j<arr.length ; j++){
if(arr === arr[j]){
bbb.innerHTML='異なる数値を入力してください。' ;
}
}

},false
);

このようなコードを書いてみたのですが、まあ見事に何書いてもこのエラー文が出てしまいます。
同じ配列を比較してることになるのだから当たり前なのですが、
文字列arrのなかで、for文を回し、同じ数値を入力させないようにするためにはどのようなコードを書けばいいのでしょうか?

どなたか教えてください。
よろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/13 17:28

    コードはコードブロック```で囲ってください。また、エラーメッセージを添付してください。起きていることに対してやってみたことを具体的に記載してください。https://teratail.com/help/question-tips#questionTips3-4

    キャンセル

  • x_x

    2018/05/15 15:13

    「このエラー文」とは? fuctionと書いてあって動かないような気がしますが、実際にこのコードで検証したのでしょうか?

    キャンセル

回答 2

+1

はじめまして

はじめに、バリデーションが動作しなかった原因ですが、値比較の際にarrそのものとarr[j]を比較しているので

if (arr[i] === arr[j]) {
    bbb.innerHTML = '異なる値を入力してください。';
}

と変更すれば、正しく値が比較されます


ここからはエラーの修正です。

上記のスクリプトにはいくつかタイポがありました

ver <1> bbb= document.getElementById('bbb');
ver <1> click= document.getElementById('click1');

click.addEventListener{<2>' click',fuction <3>(){
  arr=[];
  for(i=0; i<3; i++){
    arr[i]= document.getElementById('aaa' +(i + 1)).value)<4>;

    for(j=0; j<arr.length ; j++){
      if(arr[i] === arr[j]){
        bbb.innerHTML='異なる数値を入力してください。' ;
      }
    }
  <5>
},false);
  1. ver -> var
  2. { -> ( (開きカッコが違う)
  3. fuction -> function
  4. value) -> value (閉じカッコが多い)
  5.   -> } (閉じカッコが足らない)

以上5点(6箇所)を修正すれば正しく動作するかと思います

余談)
余計なお世話かもしれませんが、タイポが多い場合はコードをハイライトしてくれるエディタを利用して見てはいかがでしょうか?

Visual Studio Code -> https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

リアルタイムにどのコードの書き方がおかしいとかカッコが足りないとかを指摘してくれます

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

数値のチェックをするかどうかはともかくユニークかどうかはこうします
(idでやってもいいですが、クラスのほうがわかりやすいので今回はそちらで)

$(function(){
  $('.aaa').on('input',function(){
    var arr1=$('.aaa').map(function(){
      return $(this).val();
    }).get().filter(function(x){
      return x!=="";
    });
    var arr2=arr1.filter(function(x,y,z){
      return z.indexOf(x)==y;
    });
    $('#bbb').text(arr1.length!=arr2.length?"異なる数値を入力してください":"");
  });
});
<input id='aaa1' class="aaa" type='text'>
<input id='aaa2' class="aaa" type='text'>
<input id='aaa3' class="aaa" type='text'>
<div id='bbb'></div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

  • 解決済

    php 配列の中身を非表示

    お世話になります。 配列の中身を非表示にする方法はありますでしょうか? やりたいことはif(empty)などで中身がなかった場合に非表示にするみたいなプログラムを実装したいのです

  • 受付中

    JavaScriptでのValueセット

    お世話になります。 つたないコードで申し訳ありませんが、 JavaScriptの処理がうまくいかず悩んでおります。 どこをどう直せば良いのか、アドバイス頂けると幸いです。 ●何

  • 解決済

    [js] このコードをもっと簡単にかけませんか?

    下記のコードをもう少し簡単(わかりやすく)に書くことはできませんでしょうか? 特にfor,ifの部分をお願いします。 <body> <form> <div id="a"> <

  • 解決済

    作成したボタンの値をテキストボックスへ出力方法

    作成したボタン(HTML)押下後、テキストボックスへ出力するにはどのようにすればよいでしょうか? このテキストボックスは ・暗証番号機能(数値のみ) ・4桁の入力制限 以上で

  • 受付中

    innerHTMLの追加と削除

    こんにちは 現在JSでToDoメモのようなものを作ろうと思っているのですが 問題点が2つ出てきました。 1、innerHTMLにtextに書き込まれた内容を書き込めるが追加ができな

  • 解決済

    JSの子要素のvalue値をループでセット

    <!-- A グループ --> <div id="groupA">     <div class="formGroup">         <input type="text">

  • 解決済

    ボタンを押したときに表示

    下のプログラムでボタンを押した後に表示させたいのですが、書き方がわからないので、教えて頂けたらとおもい投稿しました。

  • 解決済

    DOMで転記することでできない

    ボタンを押した時にフォームに入力した値が別のフォームに転記される処理をjavascriptで実装したいのですが、うまく転記することができないため、質問させていただきます。 処

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

  • JavaScript

    16496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。