Hey, Any idea on how I can get DOM elements on discourse without having to use a setTimeout and a querySelector. Cause currently I do something like this:- 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]) If I don’t use the above timeouts, I sometimes get null elements as the DOM hasn’t loaded fully, even after putting this inside a window.onload function. so my objective is to get DOM elements and change the onChange functionality. Any help in this would be great. Thanks :slight_smile:

Discourse is a full EmberJS application, so you can’t query/manipulate elements like if it was a server rendered plain HTML website. In order to customize the web app you can follow the guidelines at Developer’s guide to Discourse Themes

Hey Jay, So I was trying to call moEngage analytic functions onClick of certain buttons on the page (eg:- like,comment,share) I can only do this if I have access to the onClick functionality of these buttons. Is there any plugin within discourse that would help me achieve this? Thanks

You should be able to do that in a theme component. I recommend that you start with the developer’s guides to see how things work.

How to get DOM elements and change onClick functionality

Development

pfaffman (Jay Pfaffman) September 13, 2022, 12:23am 3

On addition to looking at the developer guide, you might take a step back and describe what you are trying to do rather than your suggested solution.

Topic		Replies	Views
Executing js after DOM loaded Product Support	6	3835	November 30, 2018
Plugin: performing DOM manipulation on pages Development	2	821	July 10, 2017
Can't access element defined in plugin outlet with DOM interface Development	3	694	April 3, 2021
How to get around DOMContentLoaded for navigation? Development	14	650	February 21, 2025
JavaScript Execution Time Development	2	427	March 14, 2024

How to get DOM elements and change onClick functionality

Related topics