JavaScriptポップアップブロックのヘルプ

開発
1

こんにちは。JavaScriptについてあまり詳しくなく、ChatGPTを使って、テーブル内の要素をクリックしたときに情報が表示されるポップアップブロックを表示するスクリプトを作成しようとしました。要素はテーブル内にあるのですが、その情報が必要かどうかはわかりません。

// テーブル要素を取得
const tableElement = document.querySelector("table");

// テーブルにクリックイベントリスナーを追加
tableElement.addEventListener("click", function(event) {
  // クリックされた要素を取得
  const clickedElement = event.target;

  // クリックされた要素がtdの場合のみ処理を実行
  if (clickedElement.tagName === "TD") {
    // ポップアップ要素を作成し、ページに追加
    const popup = document.createElement("div");
    popup.classList.add("popup");
    popup.innerHTML = "ここにポップアップコンテンツが表示されます！";
    document.body.appendChild(popup);

    // クリックされた要素の隣にポップアップを配置
    const rect = clickedElement.getBoundingClientRect();
    popup.style.top = `${rect.top + window.scrollY + 10}px`;
    popup.style.left = `${rect.left + window.scrollX + 10}px`;
  }
});

これはChatGPTが作成したものですが、試してみたところ動作しませんでした。何が間違っているのか、何か助けていただけますか？

2

Discourse は複雑な JavaScript アプリケーションであり、このようなことを達成するには、おそらく単純な JavaScript よりも複雑になるでしょう… ChatGPT が提供できる以上の助けが必要になる可能性が高く、ここで無料のサポートが得られるかどうかはわかりません！

とはいえ、誰かがここでアドバイスをする前に、あなたが何を達成しようとしているのか、もっと知る必要があります。このテーブルは Discourse のどこにありますか？投稿内ですか？それとも他の場所ですか？このブロックにはどのような情報が含まれますか？

「いいね！」 4
3

それは正しいと思いますが、コードを実際に見ずに考えていました。Discourse Translator が非常に似たことを行っていると思います。そこから始めるのが良いと思いますが、「ええと、私はJavaScriptについてはあまり詳しくありません」は、それを成し遂げるために必要なスキルレベルではないでしょう。

プラグインの作成に慣れている人なら5〜10時間（ただし、概念実証なら2時間くらい）かかるだろうと推測します。

「いいね！」 2
4

大丈夫です、ハハハ。
Discourse のテーブルは、フロントページにある「ヘッダーの下」にあります。ボックス内に複数のリンクされたテキストを手動で入力する予定です。他に情報が必要な場合はお知らせください。