Addeventlistener Only Working At Page Refresh?

I´m modifying the appearance of two drop down lists. No problems here. Everything works great. The only issue is that the addEventListener method only works at page refresh. How

Solution 1:

You didn't list the target page, but it probably uses AJAX to set and/or change that global variable.

In addition, the question-code will break if the script loses its @grant none status, or if you try to use it on any browser but Firefox. (Unless the script uses Injection -- which we can't tell from the question.)

To get around the AJAX problem, poll for the variable inside a setInterval(). To make the code more robust, use unsafeWindow or Script Injection. See "Accessing Variables from Greasemonkey..." for more information.

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

var globScope       = unsafeWindow || window;
var cityCountTimer  = setInterval (styleTheCityList, 333);

functionstyleTheCityList () {
    this.lastCityCount  = this.lastCityCount || 0; // Static var for this funcif (
            typeof globScope.character          != "undefined"
        &&  typeof globScope.character.citynum  != "undefined"
    ) {
        varCityCount  = parseInt (globScope.character.citynum, 10);
        if (CityCount !=  this.lastCityCount) {
            varPosX        = CityCount * (-15);
            varMyHeight    = CityCount * 15 - 15;
            varMyStyle     = '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;
        }
    }
}