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.13 ベストアンサー 回答者： sukitaro 回答日時： 2021/11/03 18:52

No10です。

No11さん、ありがとうございました。

わたしも最初、他の回答者さんへのコメントはいいのか迷いましたが、

https://blog.goo.ne.jp/oshietegoo/e/8b3c38e5134b …
ガイドライン上は、

>質問者の疑問や問題の解決に寄与するようなものではない、他の回答者へ向けたコメント。

がダメであり、
No2のサンプルコードから、No10へ
ブラッシュアップしていただいたおかげで、
最終的に質問者さんの解決に寄与するものとなり、
ガイドラインに適合すると考えます。

質問者さんの

>どうすれば２回目以降でこのイベントを発生できるか

への回答は、要点としては、

・focusout発火のイベントを、inputではなく、documentに追加する
・比較したい値を配列に格納する
・上記配列を、some関数で、e.target.valueの値と照合する
・自分自身と照合しないために、事前に自分だけは空にしておく

といった感じになるのではと思います。

わたしの当初の回答では不備があったと思いますが、
今回は知らない用語や、関数、バブリングフェーズなど、
大変勉強になりました。
No11さん、ありがとうございました。

No.14 回答者： babu_babu_baboo 回答日時： 2021/11/04 09:27

本題、質問をあらためて見直したけれど無限ループなのはなぜ？

添付された画像が見難いです。HTML文を掲示してください。

No.12 回答者： babu_babu_baboo 回答日時： 2021/11/03 18:48

#質問者置き去りな者です

Inputs.filter (f=> e != f).map (e => e.value)

--
const は除いて１行で！？

document.addEventListener ('focusout', ({target: e}, V)=>
　Inputs.includes (e) && (
　　e.value = isNaN (V = parseInt (e.value, 10) + '')
　　? ''
　　: (Inputs.filter (f=> e != f).map (e => e.value).some ( v => v == V) && (
　　　　alert (V + 'はすでに存在します'),
　　　　e.focus ()
　　　), V)
　)
);

No.11 回答者： babu_babu_baboo 回答日時： 2021/11/03 17:41

#質問者置き去りな者です

人間が入力するであろうデータには、チェックが必要です。
（数値の後に空白文字とか・・・）

それにしても素晴らしいですね！相当できる方なのですね。
失礼しました。

({target: e})=> {
　・・・
}
次はショートコーディングでもいかがですか？(w)

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>

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

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

every じゃなくて some でした。

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

#5 です

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

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.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.5 回答者： babu_babu_baboo 回答日時： 2021/11/02 12:45

#3です

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

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