Jewell Simon

UI Changes that break custom Scripts

Discussion created by Jewell Simon on Oct 25, 2019
Latest reply on Oct 29, 2019 by Jewell Simon

OK, sometimes(allTheTime) changes happen on the front end that break our custom JS or CSS and we don't know until a teacher or professor call us and tell us that, "Canvas is broken"


I am going to use this discussion board to log the problems and fixes that I find.

I welcome you to do this as well.

Hopefully these things can save you some time.


p = `problem`;

c = `culprit`;

s = `solution`;





I found out all of my functions were not being called.


document.addEventListener("DOMContentLoaded", function() {...
//DOMContentLoaded no longer works the scripts gets hit after the DOM is loaded


document.readyState !== "loading"
? console.log(`1`)
: document.addEventListener("DOMContentLoaded", function() {
//the readyState resolved my issue and the DOMContentLoaded is there just in case Canvas Devs change how things are done




a function that determined if a teacher was on a certain page did not deploy properly one of my bools that were attached to a querySelector path always returned false


let visibleMenu = document.querySelector(
'.ic-app-course-menu.list-view nav #section-tabs li.section a[title="Settings"]');


let visibleMenu = document.querySelector(
'nav #section-tabs li.section a[title="Settings"]'
//the path is screwed up (instead of ....list-view it is now....list-view-a11y-left-menu-flag)I shortened the path and eureka I don't have to worry about the path name changing to much more