JavaScript 팝업 차단 관련 도움 요청

개발
1

안녕하세요, 저는 자바스크립트에 대해 잘 모르는데 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 = "This is the pop-up content!";
    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`;
  }
});

위와 같은 코드가 생성되었지만, 실행해 보니 동작하지 않습니다. 무엇이 문제인지 도움을 주실 수 있을까요?

2

Discourse는 복잡한 JavaScript 애플리케이션이며, 이런 것을 구현하는 것은 단순한 JS 작업보다 훨씬 더 복잡할 가능성이 높습니다. ChatGPT가 제공할 수 있는 도움보다 더 많은 지원이 필요할 것이며, 이곳에서 그 수준의 지원을 무료로 받을 수 있을지 확신할 수 없습니다!

그럼에도 불구하고, 누군가가 조언을 해줄 수 있으려면 여러분이 무엇을 이루고자 하는지에 대해 더 많은 정보가 필요합니다. 이 테이블은 Discourse의 어디에 위치해 있나요? 게시물 내부인가요? 다른 곳인가요? 이 블록 안에는 어떤 정보가 포함될 예정인가요?

3

그렇게 생각하는데, 저는 실제로 코드를 살펴본 적은 없지만 이 문제에 대해 생각해 보았어요. Discourse Translator가 매우 유사한 일을 하는 것 같아요. 거기서 시작하는 것이 좋겠지만, "음, 사실 저는 자바스크립트에 대해 잘 모릅니다"라는 정도는 이 작업을 수행하는 데 필요한 기술 수준이 아닐 거예요.

플러그인 작성에 익숙한 사람이 5~10시간(개념 검증용이라면 2시간 정도)이 필요할 것으로 추정합니다.

4

괜찮습니다, 하하.
디스코urs의 표는 홈페이지의 “Under header” 섹션에 있습니다. 상자 안에 여러 개의 링크된 텍스트를 수동으로 입력할 계획입니다. 더 필요한 정보가 있다면 알려주세요.