DOM 요소 가져오기 및 onClick 기능 변경 방법

개발
1

안녕하세요,

setTimeout와 querySelector를 사용하지 않고 discourse에서 DOM 요소를 가져오는 방법에 대해 아이디어가 있을까요?
현재 저는 다음과 같은 코드를 사용하고 있습니다:

setTimeout(() => {
                    var createTopicButton = document.querySelector("#create-topic");
                    if(createTopicButton)
                        createTopicButton.onclick = function (e) {
                        if (window.Moengage && window.Moengage.track_event) {
                            window.Moengage.track_event("Topic_Create_Clicked", {});
                        }
                        setTimeout(() => {
                            var topicCreate = document.querySelector("#reply-control .save-or-cancel .btn-primary")
                            topicCreate.onclick = function (e) {
                                let heading = document.querySelector('#reply-control #reply-title').value;
                                let category = document.querySelector('.select-kit-header-wrapper>.select-kit-selected-name>.name>.badge-wrapper>.badge-category>.category-name')?.innerText;
                                let desc = document.querySelector('.d-editor-textarea-column>.d-editor-textarea-wrapper>textarea').value;
                                let imagePresent = desc.includes("upload://");
                                if (window.Moengage && window.Moengage.track_event && heading && category && desc) {
                                    window.Moengage.track_event("Topic_Created", {"Category":category,"Topic Name":heading,"Topic Description":desc,"Is_image_present":imagePresent});
                                }

                            }
                        },[300])
                        
                    };
                },[500])

위와 같은 setTimeout를 사용하지 않으면, window.onload 함수 안에 코드를 넣었음에도 불구하고 DOM이 완전히 로드되지 않아 null 요소를 반환하는 경우가 있습니다.
따라서 제 목표는 DOM 요소를 가져와서 onChange 기능을 변경하는 것입니다.

이 부분에 대한 도움이 있다면 좋겠습니다.

감사합니다 :slight_smile:

2

Discourse는 완전한 EmberJS 애플리케이션이므로, 서버 렌더링된 일반 HTML 웹사이트처럼 요소를 쿼리하거나 조작할 수 없습니다.

웹 앱을 커스터마이즈하려면 다음 가이드라인을 따르세요.

Developer’s guide to Discourse Themes

3

개발자 가이드를 살펴보는 것 외에도, 제안한 솔루션을 나열하기보다는 어떤 작업을 수행하려는지 한 발 물러서서 설명해 보시는 것도 좋습니다.

4

제이, 안녕하세요.

페이지의 특정 버튼(예: 좋아요, 댓글, 공유)의 onClick 이벤트에서 moEngage 분석 함수를 호출하려고 시도하고 있습니다.

이 버튼을 클릭할 때의 onClick 기능에 접근할 수 있을 때만 이 작업을 수행할 수 있습니다. 이 작업을 수행하는 데 도움이 되는 Discourse 플러그인이 있을까요?

감사합니다.

5

테마 컴포넌트에서 이 작업을 수행할 수 있어야 합니다. 어떻게 작동하는지 확인하려면 개발자 가이드부터 시작하는 것을 권장합니다.