

フォームの特定のinputにひらがな以外が入力されたときにアラートを表示するコードを作成していますが、初学者なのでつまづいています。

下記コードで一応希望通りの動きはするようですが、const kana で指定したいIDが２つある場合、どうしたら良いでしょうか？  
constのところで2つ指定すれば良いのかと思い、getElementByIdの箇所をquerySelectorAllにしたり、カッコ内を('LastName_Kana__c，FirstName_Kana__c');
のようにしてみたりしましたがいずれもうまく行きません。

そもそもこの考え方は正しいでしょうか？  
どうぞよろしくお願いいたします。

[code]

    const kana = document.getElementById('LastName_Kana__c');
    
    kana.addEventListener('input', (event) => {
      let tmp = [];
    
      kana.value.split("").forEach(function(item, i) {    
        if (item.match(/^[\u3040-\u309f]+$/)) {
          tmp.push(item);
          alert("ひらがなですね");
        }
      });
    
      if (tmp.length > 0) {
        kana.value = tmp.join("");
      } else {
        kana.value = "";
        alert("ひらがなじゃないですね");
      }
    });
    
[/code]


CC BY-SA 4.0
2022-06-16T06:14:15.590
89413
2022-06-16T21:43:04.407
2022-06-16T06:18:01.723
53096
53096
question
javascript
複数IDを対象にしたinputイベントについて


  * 方法1: `NodeList` を得て、ループで処理する。  
[`querySelectorAll`](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll)
は要素のリスト(`NodeList`)を返します。これは配列のようなコレクションです。このリストに含まれる要素全てに処理を行なうには、`for` ループ や
`forEach` メソッドなどを使います。

  * 方法2: 親要素（あるいはもっと上の要素）にイベントリスナーを設定する。  
イベントは DOM
階層の上層にある要素に[キャプチャさせることが出来ます](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)。これを利用し、まとめて全てのイベントを処理する要素を用意します。

どちらの方法でも、イベントの[`target`
プロパティ](https://developer.mozilla.org/ja/docs/Web/API/Event/target)を利用します。

例:

[code]

    // 方法1: NodeList の要素毎にイベントリスナーを設定する
    const buttons = document.querySelectorAll("#one, #two")
    for (elm of buttons) {
        elm.addEventListener("click", ev => {
            console.log("--- 方法1: 直接設定したイベントリスナー ---")
            console.log("currentTarget.id: ", ev.currentTarget.id)
            console.log("target.id: ", ev.target.id)
        })
    }
    
    
    // 方法2: 一つの要素にイベントリスナーを設定し、子孫要素のイベントを全て処理させる
    const parent = document.getElementById("parent")
    parent.addEventListener("click", ev => {
        console.log("--- 方法2: 親要素に設定したイベントリスナー ---")
        console.log("currentTarget.id: ", ev.currentTarget.id)
        console.log("target.id: ", ev.target.id)
    })
[/code]

[code]

    <p id="parent">
      Hello
      <button id="one">Button 1</button>
      <button id="two">Button 2</button>
    </p>
[/code]

単純なケースでは方法1でよいと思います。方法2のようにイベントの伝搬を利用すると考慮すべきことが増えます。例えば上のコードだと、要素 `parent` には
ボタン以外の領域も含まれているので、そこをクリックして発生するイベントも考慮しなければいけません。


CC BY-SA 4.0
2022-06-16T21:43:04.407
89433
2022-06-16T21:43:04.407
3054
89413
answer