JSループにおける配列とオブジェクトについて

Question

前提・実現したいこと 試したこと

現在laravelで掲示板アプリを作成しているlaravel初心者です。
PHPのfoeachループで回して表示されている掲示板の全ての投稿のコメント入力画面に、vanillaJSの絵文字機能を実装したいと考えております。

絵文字機能自体は表示させることには成功し、選択した絵文字の要素をgetElementsByIdで取得した場合は、コメント入力画面にも選択した絵文字を挿入させることができたのですが、
JSのループの中でgetElementsByClassNameで要素取得させたところ、すべての投稿のコメント入力画面で絵文字を選択しても、コメント入力フォームに挿入されないで困っています。

配列とオブジェクトの理解が足りておらず、この現象になっているかもしれませんが、その部分なども含めてアドバイス等いただけると幸いです。

発生している問題・エラーメッセージ

index.blade.php

<input id="body" name="body" class="{form-control{{ $errors->has('body') ? 'is-invalid' : '' }}} emoji w-full focus:outline-none focus:placeholder-gray-400 text-gray-600 placeholder-gray-600 pl-12 bg-gray-200 rounded-full py-3 " value="{{ old('body') }}" type="text" placeholder="コメントを入力">
//input

<button type="button" class="emoji-trigger inline-flex items-center justify-center rounded-full h-10 w-10 transition duration-500 ease-in-out text-gray-500 hover:bg-gray-300 focus:outline-none"></button>
//

app.js

//① node_modulesのモジュールをインポート
import { EmojiButton } from '@joeattardi/emoji-button'; 

//② 要素取得など
const picker = new EmojiButton();　
var trigger = document.getElementsByClassName("emoji-trigger");　

//③ 絵文字ボタンをクリックした後、絵文字選択画面を表示
for(let i = 0; i < trigger.length; i ++){　　　　　　　　　
        trigger[i].addEventListener('click',function(){
          picker.togglePicker(trigger[i]);
         })
}

//④ 絵文字選択画面で選択した絵文字をコメント入力画面に挿入(エラー箇所)
const picker2 = []　// ②で要素取得したpickerをオブジェクトから配列に変換して処理
for(var k = 0; k<10; k++){
   const p = new EmojiButton();
   picker2.push(p)
}
for(let i = 0; i < picker2.length; i ++){
  picker2[i].on('emoji',function(selection){
    var selectedemoji = selection.emoji;
    document.getElementsByClassName('emoji').value += selectedemoji;})　// 選択した絵文字をコメント入力画面に挿入

絵文字ピッカーのイメージ画像
動作イメージ
コメント入力欄にある絵文字ボタンをクリック
→絵文字選択画面(ピッカー)が開く。
→選択画面から入力したい絵文字を選択する
→コメント入力画面に挿入される。

![

絵文字選択後に、devtoolのコンソール画面の内容
![

補足情報（FW/ツールのバージョンなど）

Laravel Framework 7.30.2

MySQL 8.0.21 Homebrew

PHP 7.4.14

Docker 19.03.13

Heroku 7.47.2

Comments

[mather]

app.js のファイルはそのままの状態で貼り付けていますか？全角空白が大量に含まれているようですが…

[maisumakun]

書いてメリットがあるわけでもないですが、いちおうJavaScriptは「ソースコード中の全角スペースも単なるスペースとして処理される」言語です。

[revoiot]

matherさん
ご指摘ありがとうございます。
いえ、コメントアウト部分（全角部分）は後で、質問用に付け足しています。
質問用に書き変えた箇所があるため、全角空白が含まれている可能性がございます。

[revoiot]

maisumakunさん
全角部分があっても処理されるのですね。
教えていただきありがとうございます。

[mather]

> JavaScriptは「ソースコード中の全角スペースも単なるスペースとして処理される」言語です
それはそうなんですけど
> コメントアウト部分（全角部分）は後で、質問用に付け足しています。
> 質問用に書き変えた箇所があるため、全角空白が含まれている可能性がございます。
こっちの方を心配していました。

[revoiot]

matherさん
御心配いただきありがとうございます。
私の言い方に語弊があり、すみません、、、
元ファイルのapp.jsにはコメントアウトを追記していないため大丈夫そうです。

Answer 1

document.getElementsByClassNameは、Elementsと名前が複数形になっているように、複数取れることが前提となっていて、返り値は要素1つではなくコレクションです。

クラスでヒットする<input>が複数あるとすれば、どの要素へ絵文字を追加するのかを、何らかの方法で探し出さないといけません。

Comments

[revoiot]

回答ありがとうございます。
取得する要素が複数あるため、コレクションを配列に格納しようと考えたのですが、どうもうまくいかないようです。

④でどの部分の書き方に問題があるのでしょうか？

[maisumakun]

トリガーするボタンと、ボタンを押した後に絵文字を入力するフォームは、どのように紐付けてありますか？

> ④でどの部分の書き方に問題があるのでしょうか？

「ここが悪い」というものではなく、そもそも考え方からしっかり立てないといけないところです。

[revoiot]

質問の仕方が悪く、申し訳ございません。。。。
紐づけている部分は下記となります。
document.getElementsByClassName('emoji').value += selectedemoji;})　// 選択した絵文字をコメント入力画面に挿入

＞取得する要素が複数あるため、コレクションを配列に格納しようと考えたのですが、どうもうまくいかないようです。
さきほど自分はこのように回答しましたが、間違いです。すみません。
上記にあるスクリプトのままだと、1つの絵文字を複数のinputにいれようとしてしまいますね、、、
documentgetelementbyid,document.querySelectorだと逆にひとつの要素しか取得せず、複数の投稿画面の場合に対応できませんし、、
すみません、やり方が思いつきません。。。

[maisumakun]

> 紐づけている部分は下記となります。

元の回答にあるように、これでは全部取れてしまいます。ボタンと入力をどのように対応付けるのか、まずは「ルール」を考えてください。ルールが決まってから、そのルールをコードに起こします。