JavaScript右クリック表示をclass名でしたい

前提

ボタンに右クリックでメニュー表示がしたいです。
JavaScriptのIDでの取得はたくさんコードが見つけられたのですが、class名での方法がなかったため
どなたかご教示いただけますと幸いです。

実現したいこと

ボタンにIDを付ければうまくいくのですが、
１ページ内に複数同じ右クリック表示をしたいためclass名で取得したい。

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

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function
    at window.onload

該当のソースコード

window.onload = function () {
    document.getElementsByClassName('click-right').addEventListener('contextmenu', function (e) {
        //マウスの位置をstyleへ設定（左上の開始位置を指定）
        document.getElementById('contextmenu').style.left = e.pageX + "px";
        document.getElementById('contextmenu').style.top = e.pageY + "px";
        //メニューをblockで表示させる
        document.getElementById('contextmenu').style.display = "block";
    });
    document.body.addEventListener('click', function (e) {
        //メニューをnoneで非表示にさせる
        document.getElementById('contextmenu').style.display = "none";
    });
}

試したこと

document.getElementById('click-right') →成功
document.getElementsByClassName('click-right') →失敗

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

ここにより詳細な情報を記載してください。

javahack

2022/09/01 17:47

getElementsByClassNameで取得されるのは配列オブジェクトなので、そこを意識してコードを書けば良いと思います。

行動規範の内容に同意します

回答2件

ベストアンサー

getElementsByClassName() が返すのは Element ではなく HTMLCollection ですから、addEventListener() を直接呼ぶことはできません。

対象のクラスを持つ要素が一つだけなら、document.getElementsByClassName(...)[0].addEventLisetner(...) とすればよいです。複数の要素が対象になるなら、for (let element of document.getElementsByClassName(...)) { のようにしてループしましょう。

投稿2022/09/01 21:45

int32_t

総合スコア20832

takuharu

2022/09/02 02:17

ご教示ありがとうございます！下記のように変更し、右クリックで表示されるようになったのですが、画面のどこをクリックしても出るようになってしまいました。記述が間違っているでしょうか。もしくはclass名での取得自体がおかしい考え方なのでしょうか。。度々お手数ですが、何卒ご教示いただけますと幸いです。 window.onload = function () { document.getElementsByClassName('click-right').addEventListener('contextmenu', function (e) {... 　　↓↓↓ window.onload = function () { for (let element of document.getElementsByClassName('click-right')) { addEventListener('contextmenu', function (e) {...

int32_t

2022/09/02 04:26

addEventListener(...) ではなく、element.addEventListener(...) です。

takuharu

2022/09/02 05:18

ありがとうございます！上手く動きました！！！本当に助かりました、ありがとうございます。

takuharu

2022/09/04 03:07

お忙しいところ度々申し訳ございません、追加でご教示いただけますと大変幸いです。こちらの動きを二つのclass名に付けることは可能でしょうか。一つは動くのですが、二つ目が動かない状態です。 ↓.class-01に対して一つ window.onload = function () { for (let element of document.getElementsByClassName(class-01')) { element.addEventListener('contextmenu', function (e) {... ↓.class-02に対してもう一つ window.onload = function () { for (let element of document.getElementsByClassName('class-02')) { element.addEventListener('contextmenu', function (e) {...

int32_t

2022/09/04 04:15

新しい質問ば別の質問エントリーにしましょう。 window.onload を上書きすると一つ目が消えるので、一つの function() {} の中に二つの for を書けば良いでしょう。

takuharu

2022/09/04 09:09

質問を重ねてお送りして申し訳ありませんでした。次回から気を付けます。そしてご丁寧なご説明ありがとうございます、問題なく動きました。本当にありがとうございました。

行動規範の内容に同意します

元ソースは「JavaScriptでオリジナルの右クリックメニューを作成する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン」あたりでしょうか？
とりあえず、こんな感じでやるとよいです

javascript
1<head>
2<style>
3body{
4  background-Color:gray;
5  min-height:100vh;
6}
7#cMenu{
8display:none;
9position:fixed;
10left:0;
11top:0;
12width:200px;
13height:100px;
14border:1px solid black;
15background-color:white;
16}
17</style>
18<script>
19document.addEventListener('contextmenu',e=>{
20  e.preventDefault();
21  const t=e.target;
22  if(t.closest('.contextmenu')){
23    cMenu.style.left=e.pageX+"px";
24    cMenu.style.top=e.pageY+"px";
25    cMenu.style.display="block";
26  }
27})
28document.addEventListener('click',e=>{
29    cMenu.style.display="none";
30});
31</script>
32</head>
33<body>
34<div id="cMenu">
35<ul>
36<li>1.Google</li>
37<li>2.Yahoo!</li>
38<li>3.Amazon</li>
39</ul>
40</div>
41<div class="contextmenu">test</div>
42<div class="contextmenu">test</div>
43<div class="contextmenu">test</div>
44</body>