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

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

HTML
<input id='aaa1' type='text'>
<input id='aaa2' type='text'>
<input id='aaa3' type='text'>

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文を回し、同じ数値を入力させないようにするためにはどのようなコードを書けばいいのでしょうか？

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

m.ts10806

2018/05/13 08:28

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

x_x

2018/05/15 06:13

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

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

回答2件

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

javascript
1$(function(){
2  $('.aaa').on('input',function(){
3    var arr1=$('.aaa').map(function(){
4      return $(this).val();
5    }).get().filter(function(x){
6      return x!=="";
7    });
8    var arr2=arr1.filter(function(x,y,z){
9      return z.indexOf(x)==y;
10    });
11    $('#bbb').text(arr1.length!=arr2.length?"異なる数値を入力してください":"");
12  });
13});

HTML
1<input id='aaa1' class="aaa" type='text'>
2<input id='aaa2' class="aaa" type='text'>
3<input id='aaa3' class="aaa" type='text'>
4<div id='bbb'></div>

投稿2018/05/14 00:38

yambejp

総合スコア114777

はじめまして

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

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

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

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

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

javascript
1ver <1> bbb= document.getElementById('bbb');
2ver <1> click= document.getElementById('click1');
3
4click.addEventListener{<2>' click',fuction <3>(){
5  arr=[];
6  for(i=0; i<3; i++){
7    arr[i]= document.getElementById('aaa' +(i + 1)).value)<4>;
8
9    for(j=0; j<arr.length ; j++){
10      if(arr[i] === arr[j]){
11        bbb.innerHTML='異なる数値を入力してください。' ;
12      }
13    }
14  <5>
15},false);