onmousemove Event Not Firing

Question

I've searched through the answers provided in this blog and others without any resolution. Help is greatly appreciated.

I have an onmousemove event that is executing the first item in the list of events to fire but won't execute the second. document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;

The issue doesn't appear to be browser-specific; it occurs in Chrome and Safari. Haven't tried firefox yet.

In Chrome, I can pull up the browser's console and execute learnPanel.redraw(); and it works as expected. Also, if I put an alert statement between the maps.redraw and learnPanel.redraw statements in the onmouseover event, the alert will execute as expected.

the learnPanel object is created with the code below

        LearnPanel.prototype = new Panel();
        LearnPanel.prototype.constructor = LearnPanel;
        function LearnPanel() {
        }
        LearnPanel.prototype.draw = function() {

            var br_element = document.createElement("br");


            /* country name */
            if(this.isCountryNamesSelected === "yes") {
                var temp_label;
                temp_label = document.createElement("label");
                temp_label.classList.add('quiz_question_heading_label');
                temp_label.innerHTML = "Country: ";

                this.flagColumnTab.appendChild(temp_label);

                this.labelCountryName = document.createElement("label");
                this.labelCountryName.id = "country_name";
                this.labelCountryName.classList.add('quiz_question_label');

                this.flagColumnTab.appendChild(this.labelCountryName);
                this.flagColumnTab.appendChild(document.createElement("br"));

            }
            /* capital */
            if(this.isCapitalNamesSelected === "yes") {
                var temp_label;
                temp_label = document.createElement("label");
                temp_label.classList.add('quiz_question_heading_label');
                temp_label.innerHTML = "Capital: ";

                this.flagColumnTab.appendChild(temp_label);

                this.labelCapitalName = document.createElement("label");
                this.labelCapitalName.id = "capital";
                this.labelCapitalName.classList.add('quiz_question_label');

                this.flagColumnTab.appendChild(this.labelCapitalName);
                this.flagColumnTab.appendChild(document.createElement("br"));

            }
            /* flag */
            if(this.isCountryFlagsSelected === "yes") {

                this.flagImage = document.createElement("img");
                this.flagImage.id = "flag_image";
                this.flagImage.src = "/images/flags/_flag.jpeg";
                this.flagImage.alt = "flag logo";

                this.flagColumnTab.appendChild(this.flagImage);

                this.flagColumnTab.appendChild(document.createElement("br"));
                this.flagColumnTab.appendChild(document.createElement("br"));

            }


        }
        LearnPanel.prototype.redraw = function() {


            alert('redrawing learnPanel');
            /* country name */
            if(learnPanel.isCountryNamesSelected === "yes") {
                learnPanel.labelCountryName.innerHTML = maps.getCurrentDisplayCountryDown();
            }
            /* capital */
            if(learnPanel.isCapitalNamesSelected === "yes") {
                learnPanel.labelCapitalName.innerHTML = maps.getCurrentCountryCapitalDown();
            }
            /* flag */
            if(learnPanel.isCountryFlagsSelected === "yes") {
                learnPanel.flagImage.src = "/images/flags/" + maps.getCurrentFlagDown() + "_flag.jpeg";
                learnPanel.flagImage.alt = "flag of " + maps.getCurrentFlagDown();
            }
            /* head of state */
            /* famous landmark */

        }


        learnPanel = new LearnPanel();

Thanks in advance for the help!

Answer 1

Welcome to StackOverflow!

What you need here is an anonymous function. When you are assigning functions for the mousemove property on #map_large_africa, you want to have two distinct functions occur. Unfortunately, because of the way you have written the following statement:

`document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;`

It is actually parsed thusly:

document.getElementById("map_image_africa").onmousemove = maps.redraw;

learnPanel.redraw;

Do you see the problem? The semi-colon acts as the end of a command. The map is redrawn on mousemove, but learnPanel.redraw not part of the onmousemove assignment, and that line is executed only once, right after the onmousemove property is assigned to #map_image_africa. By wrapping it in an anonymous function, you can execute more than one line of javascript at a time.

Try the following:

document.getElementById("map_image_africa").onmousemove = function() {
    maps.redraw();    // note that these lines have () after the method name.
    learnPanel.redraw();
}

---

While I have you, please note that directly modifying properties like onmousemove and onclick are discouraged, and Events are the preferred way to interact with DOM elements, as it separates javascript from the HTML.

The above onmousemove assignment can (and should) be rewritten as such:

document.getElementById("map_image_africa").addEventListener('mousemove', function() {
    maps.redraw();
    learnPanel.redraw();
}, false);