Javascriptで同じ数字を２回打つとアラートが出るプログラミングを作ってます。

画像のように２回同じように打つとアラートを出すようなプログラミングを作ろうとしてます。
let Exist = new Array();
while(true){
let msg = "";
let inp = inputs;
console.log(inp)
if(Exist[inp]){
msg = inp+"は既に存在します";
}else{
msg = inp+"は存在しないのでExistに登録します";
Exist[inp] = true; // false; //
}
alert(msg);
}
inputsにテキストの要素を入れています。２回同じことを打つと
if(Exist[inp]){
msg = inp+"は既に存在します";
}
のイベントを起こしたいのですが今のままだと１回目で
if(Exist[inp]){
msg = inp+"は既に存在します";
}
のイベントが起きてしまいます。
どうすれば２回目以降でこのイベントを発生できるかを教えてください。
サンプルコードでいいのでよろしくお願いします。

No.1 回答者： zircon3 回答日時： 2021/11/01 17:08

HTMLのtextariaを使用し、その入力エリアに対する以下のイベントのいずれかを使用すれば・・・と思います。

oninput
onkeyup

で、そのイベントで呼び出されるJavascript関数では・・・

(1) 入力されたのが数字かチェックし数字でない場合はエラー
(2) 数字の場合は直前で入力された数字と同じかチェックし同じ場合はエラー
(3) 上記でない場合は入力された数字を次回チェック用の変数に代入

・・・ということを行えばよいのではないでしょうか？
参考まで。

No.2 回答者： sukitaro 回答日時： 2021/11/01 17:58

こんなイメージでしょうか。

<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" />

<script>
const Inputs = document.getElementsByName('inputs');
const Exist = new Array(Inputs.length).fill(null);
Inputs.forEach((ipt,idx)=>{
ipt.addEventListener('keyup',()=>{
if(Exist.indexOf(ipt.value) >= 0){
alert(ipt.value + 'はすでに存在します');
}
Exist[idx] = ipt.value;
},false);
});
</script>

No.3 回答者： babu_babu_baboo 回答日時： 2021/11/01 21:47

#2>

数字を入力した後、その数字を削除したとします。
フォーカスを動かすと数字が無いのに反応しています。
どうしたらよいのでしょう？

No.4 回答者： sukitaro 回答日時： 2021/11/02 09:16

No2です。

No3さん、ご指摘ありがとうございます。
修正しました。
こんな感じだとうまくいくでしょうか。

<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" />

<script>
const Inputs = document.getElementsByName('inputs');
const Exist = new Array(Inputs.length).fill(null);
Inputs.forEach((ipt,idx)=>{
ipt.addEventListener('keyup',()=>{
let checkChange = (Exist[idx] !== ipt.value);
let checkIndex = (Exist.indexOf(ipt.value) >= 0);
if(checkChange && checkIndex){
alert(ipt.value + 'はすでに存在します');
}
Exist[idx] = (ipt.value === '')? null : ipt.value;
},false);
});
</script>

No.5 回答者： babu_babu_baboo 回答日時： 2021/11/02 12:45

#3です

質問者は”数字”と言っています。範囲が決められていません。
例えば最初の要素に１を入力して、次の要素に１１を入力しようとすると途中でアラートされます。

Array.includes をご存じですか？
イベントの監視を document からしてみてはどうでしょう？

No.6 回答者： sukitaro 回答日時： 2021/11/03 09:08

No4です。

No5さん、ご指摘ありがとうございます。
修正しました。
こんな感じでどうでしょう。

<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" />

<script>
const Inputs = document.getElementsByName('inputs');
const Exist = new Array(Inputs.length).fill(null);
document.addEventListener('focusout',(e)=>{
if(isNan(e.target.value)){
// 数字以外入力時の処理
}
let idx = [...Inputs].indexOf(e.target);
Exist[idx] = null;
if(Exist.includes(e.target.value)){
alert(e.target.value + 'はすでに存在します');
e.target.value = '';
}
Exist[idx] = (e.target.value === '')? null : e.target.value;
});
</script>

No.7 回答者： babu_babu_baboo 回答日時： 2021/11/03 09:39

#5です

すっきりしてきましたね。

isNan はタイポでしょうか？

getElementsByName に拘っているの？

以下の時点で配列化しておく
const Inputs = [...document.querySelectorAll('****')];

"e.target.value" の出現回数が多いです。タイポにつながります

余談ですがこれはどう？
Inputs.map (e=> e.value).every (v=> v==???)

No.8 回答者： babu_babu_baboo 回答日時： 2021/11/03 10:00

#5 です

１つ言い忘れてました。
document でイベントを監視するときは、e.target が アンカータグでも反応します。それが対象要素なのかもチェックが必要です

No.9 回答者： babu_babu_baboo 回答日時： 2021/11/03 10:29

#5 です　連投ごめんなさい

every じゃなくて some でした。

No.10 回答者： sukitaro 回答日時： 2021/11/03 16:01

No6です。

No7-9さん、ありがとうございます。
こんな感じでどうでしょう。

<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" /><br />
<a href="#">ダミーアンカー</a><br />
<input type="text" name="inputs" value="" /><br />
<input type="text" name="inputs" value="" />

<script>
const Inputs = [...document.querySelectorAll('input[name="inputs"]')];
document.addEventListener('focusout', (e) => {
let val = e.target.value;
let isNotTarget = !(Inputs.includes(e.target));
let isBlank = (val === '');
if (isNotTarget || isBlank) { return };
if (isNaN(val)) {
// 数字以外入力時の処理
}
e.target.value = '';
let isDouble = Inputs.map(e => e.value).some(v => v === val);
if (isDouble) {
alert(val + 'はすでに存在します');
e.target.focus();
} else {
e.target.value = val;
}
});
</script>