Does AddEventListener only work on page refresh?

Question

I am changing the appearance of the two dropdowns. There are no problems. Everything works great. The only problem is that the addEventListener method addEventListener works when the page is refreshed.

How to make this code work when the page loads without clicking the refresh button?

 window.addEventListener('load', function () { var CityCount = this.character.citynum ; var PosX = parseInt(CityCount) * (-15); var MyHeight = parseInt(CityCount) * 15 - 15; var MyStyle='div#citylist {width: 150px !important; margin-top: ' + PosX + 'px !important; position: absolute !important; height: ' + MyHeight + 'px !important; overflow: auto !important; padding-left: 1px !important}'; addGlobalStyle(MyStyle); addGlobalStyle('div#my_city_list {width: 150px !important; margin-top: 50px !important;}'); }, false) 

Answer 1

You did not list the landing pages , but it probably uses AJAX to set and / or change this global variable.

Also, the question code will break if the script loses its @grant none status, or if you try to use it in any browser other than Firefox. (If only the script uses Injection - what we cannot say from the question.)

To work around the AJAX problem, do a poll for the variable inside setInterval() .
To make the code more reliable, use unsafeWindow or script Injection. See "Accessing Variables from Greasemonkey ..." for details.

Putting it all together, this should work. addEventListener() not required:

 var globScope = unsafeWindow || window; var cityCountTimer = setInterval (styleTheCityList, 333); function styleTheCityList () { this.lastCityCount = this.lastCityCount || 0; // Static var for this func if ( typeof globScope.character != "undefined" && typeof globScope.character.citynum != "undefined" ) { var CityCount = parseInt (globScope.character.citynum, 10); if (CityCount != this.lastCityCount) { var PosX = CityCount * (-15); var MyHeight = CityCount * 15 - 15; var MyStyle = 'div#citylist {width: 150px !important; margin-top: ' + PosX + 'px !important; position: absolute !important; height: ' + MyHeight + 'px !important; overflow: auto !important; padding-left: 1px !important}' ; addGlobalStyle (MyStyle); addGlobalStyle ('div#my_city_list {width: 150px !important; margin-top: 50px !important;}'); this.lastCityCount = CityCount; } } }