I am using a Promise in a function to ensure the dynamic element loaded by the function is available when I try to fix some CSS styles. But fixStyling is never executed. What am I doing wrong? Is there a better way to accomplish this?
const fixStyling = function(){
console.log('change style');
let surveyBody = document.querySelector('.survey-page-body');
surveyBody.style.marginTop = "-60px";
}
function loadSM() {
return new Promise(function(resolve) {
(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src="https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd1CDe7_2F_2F4snTovolmrpjpv7u54RGrphPxAqunQp3_2FUPz.js",a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");
});
}
loadSM().then(fixStyling());
The reason why your code wasnt working was because of the promise you made in loadSM(). You never resolved or rejected the promise, so next was never triggered.
function fixStyling() {
console.log('change style');
let surveyBody = document.querySelector('.survey-page-body');
surveyBody.style.marginTop = "-60px";
}
function loadSM() {
return Promise.resolve(
(function(t, e, s, n) {
var o, a, c;
t.SMCX = t.SMCX || [], e.getElementById(n) || (o = e.getElementsByTagName(s), a = o[o.length - 1], c = e.createElement(s), c.type = "text/javascript", c.async = !0, c.id = n, c.src = "https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd1CDe7_2F_2F4snTovolmrpjpv7u54RGrphPxAqunQp3_2FUPz.js", a.parentNode.insertBefore(c, a))
})(window, document, "script", "smcx-sdk"));
}
loadSM().then(fixStyling);