Javascriptで、for文で複数idを取得し出力する方法

Question

Javascriptの勉強中です。
実現したいことは2つあります。
一つ目はfor文で複数のidを取得し、コードを短くしたい。
二つ目はそのidを使ってif文で使いたい。
色々試しましたが、出力結果がundefinedばかり出ます。
どなたかわかる方がいらっしゃいましたらご教示お願いします。

Comments

[yambejp]

結局何をしたいのでしょうか
id=user1～10の値が数値であることを確認できればよい？
なにかグルーピング用のclassは設定してはいけないのでしょうか？

[H40831]

基本的なことですが、
ooo.value みたいなものがundefinedだった場合、そもそもの ooo が取得できているのかどうかを確認するのがセオリーです。
console.log( ooo )で表示されるものが、自分が取得したかったものかどうか確認してください。

あと、配列のインデックス番号は 0 から始まるので、10個目にアクセスしたかったら [9] と入力するものだというのは理解されてますか？

まずはそのあたりをヒントに、ご自身でチェックしてみてください。

[tensai]

グルーピング用のclassを設定するのはいけます！
その方法を知りませんでした。一度調べてみます。

[退会済みユーザー]

[id^=user] とか前方一致属性セレクタでどうにかなるじゃろ

[tensai]

console.logで取得は確認できました。
インデックス番号についても理解していたつもりでしたが間違えていました。
有難うございます。

[tensai]

前方一致属性セレクタ、一度調べてみます
有難うございます。

Answer 1

user1.value === "" || user2.value === "" || user3.value === "" || user4.value === "" || user5.value === "" || user6.value === "" || user7.value === "" || user8.value === "" || user9.value === "" || user10.value === ""

は、user1~10までのどれか一つでもtrueなら成立。
userValueArrayみたいなのつくっておいて
userValueArray.includes("");
でいい

で、冷静に考えてHTMLのIDそんなに乱立しなくていい。
<input type="text" class="js-user" maxlength="1" onchange="wupBtn()"> //user1
<input type="text" class="js-user" maxlength="1" onchange="wupBtn()"> //user2
<input type="text" class="js-user" maxlength="1" onchange="wupBtn()"> //user3
こんな感じでclassに変えていい。

取得はこう。
var userArray = document.getElementsByClassName("js-user"); //=>Arrayっぽいもの
配列っぽい感じだから、ループか要素指定で触るのが丸い。

ボタンは、element[10]みたいにして触るより、直接触った方がいい。
なぜか。elementが増えるたびにコードを修正する必要があるのはしんどいからだ。
var button = document.getElementByID("button");

Answer 2

inputをグルーピングして一桁の数字かどうかチェック

• codepen

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
var users=document.querySelectorAll('.users')
users.forEach(x=>{
x.addEventListener('input',()=>{
var l1=[...users].filter(x=>x.value=="").length;
var l2=[...users].filter(x=>x.value.match(/^\d$/)).length;
var l3=[...users].filter(x=>x.value.match(/[^\d]|\d{2,}/)).length;
document.querySelector('#view').textContent=`
空:${l1}
正しい:${l2}
間違い:${l3}
`;
});
});
});
</script>
<input type="text" id="user1" class="users"><br>
<input type="text" id="user2" class="users"><br>
<input type="text" id="user3" class="users"><br>
<input type="text" id="user4" class="users"><br>
<input type="text" id="user5" class="users"><br>
<input type="text" id="user6" class="users"><br>
<input type="text" id="user7" class="users"><br>
<input type="text" id="user8" class="users"><br>
<input type="text" id="user9" class="users"><br>
<input type="text" id="user10" class="users"><br>

<div id="view"></div>

Answer 3

こんにちは

一案として、以下のようにしてみると、いかがでしょうか？

• <input type="text"> のいずれかに、何か文字を入力したり、文字を消去したりすると即座に入力チェックするように、 inputイベントにコールバックを設定する。

• 入力チェックでは、以下のようにエラーが判定される。

・各<input type="text"> に入力されている値のすべてが半角数字1個である場合、正しい入力と判定される。
・上記以外においてはエラーと判断され、ボタンがdisabled になり、赤字でエラーと表示される。

以下は、上記をコードにしたものです。

const inputs = [...document.querySelectorAll('input[type="text"]')];
const button = document.querySelector('input[type="button"]');
const error = document.querySelector('#error');

const check = () => {
    const valid = inputs.every(e => /[0-9]/.test(e.value));            
    button.disabled = !valid;
    error.textContent = valid ? "" : "エラー";
}
  
inputs.forEach(input => {
    input.addEventListener('input', check);
});

div#error には、CSSで赤字を設定しておきます。

#error { color: red; }

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/zYGdYGo

何か、意図通りではない点があれば、コメントからお知らせください。
以上、参考になれば幸いです。

備考

上記のコードの中で使っている正規表現 /[0-9]/ を /^[0-9]$/ とする必要がない理由は、各 input要素に、 maxlength="1" があるので、入力される文字列の長さが最大1であることが事前に分かっているからです。