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.isCountryNamesSe…

Accepted Answer

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);
```

onmousemove Event Not Firing

Solution

Problem