Javascript pop up block help

dev
1

Hey so I’m not really knowledgeable with javascript and tried using ChatGPT to generate a script that allows elements in a field to display a pop up block with information upon being clicked. The elements are in a table if that information is needed as well.

const tableElement = document.querySelector("table");

// Add a click event listener to the table
tableElement.addEventListener("click", function(event) {
  // Get the element that was clicked
  const clickedElement = event.target;

  // Only do something if the clicked element is a td
  if (clickedElement.tagName === "TD") {
    // Create the pop-up element and add it to the page
    const popup = document.createElement("div");
    popup.classList.add("popup");
    popup.innerHTML = "This is the pop-up content!";
    document.body.appendChild(popup);

    // Position the pop-up next to the clicked element
    const rect = clickedElement.getBoundingClientRect();
    popup.style.top = `${rect.top + window.scrollY + 10}px`;
    popup.style.left = `${rect.left + window.scrollX + 10}px`;
  }
});

It created this but upon trying it doesn’t work. Any help with what is wrong with this?

2

Discourse is a complex JavaScript application and achieving something like this is probably more complicated than some straightforward JS… you’re likely going to need more help than ChatGPT can provide, and I’m not sure you’ll get that level of support for free here!

That said, before anyone can give you advice here we’ll need to know more about what you’re trying to accomplish. Where in Discourse is this table located? within a post? somewhere else? What information would be within this block?

4 Likes
3

I think that’s right, but I have been thinking about this (without actually looking at any code), and I think that Discourse Translator does something very similar. I think that’s where to start but “Hey so I’m not really knowledgeable with javascript” probably isn’t the skill level you need to pull it off.

I’m guessing that someone who’s familiar with writing plugins will need 5-10 hours (but maybe 2 for a proof of concept).

2 Likes
4

That’s alright hahah.
The table on discourse is located “Under header”, on the front page. I plan to manually input multiple linked text in the boxes. Let me know If you need any more information