Tampermonkeyを使って要素をクリックしたときに反応させたい。

実現したいこと

すでにあるHP上の要素をクリックしたときに、Tampermonkey等を使ってアラートを出したいです。

例えば以下の様なページで、
https://www.showroom-live.com/r/nogigourmet

左上にある赤い枠で囲まれた「0」をクリックした時にアラートを出したいです。

該当のソースコード

// ==UserScript==
// @name         テスト1
// @namespace    http://www.showroom-live.com/
// @version      0.1
// @description  test.
// @author       lis
// @match        https://www.showroom-live.com/r/*
// @grant        none
// @require      http://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js
// ==/UserScript==
(function() {
    var ele = document.getElementsByClassName('st-viewnum');
    console.log(ele); //要素を取得出来ていることを確認
    ele.addEventListener('click', function() {
    alert("クリックしました");})
    }
)
();

症状

クリックしても反応がありません。

ご教授よろしくお願いします。

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

回答2件

この回答はGPT-4による自動生成回答です

getElementsByClassNameはHTMLCollectionを返すため、addEventListenerを直接適用することはできません。代わりに、要素にアクセスするためにインデックスを使用する必要があります。また、ページの読み込みが完了するまで待つためにwindow.onloadを使用します。

以下のコードを試してください。

javascript
1// ==UserScript==
2// @name         テスト1
3// @namespace    http://www.showroom-live.com/
4// @version      0.1
5// @description  test.
6// @author       lis
7// @match        https://www.showroom-live.com/r/*
8// @grant        none
9// @require      http://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js
10// ==/UserScript==
11(function() {
12    window.onload = function() {
13        var ele = document.getElementsByClassName('st-viewnum');
14        console.log(ele); //要素を取得出来ていることを確認
15        if (ele.length > 0) {
16            ele[0].addEventListener('click', function() {
17                alert("クリックしました");
18            });
19        }
20    }
21})();