A function that listens for the onmouseover event and updates the image source of an HTML img element

Question

A function that listens for the onmouseover event and updates the image source of an HTML img element

I have created a function that positions my objects based on the array they are assigned to.

For example, if they are in players[0], they will be placed in one position, and if they are in players[1], they will be placed elsewhere. The X and Y values are just placeholders for actual pixel values, which can vary significantly.

This function also takes a flag as a parameter to determine whether the source continues to the same location or changes to another source. Everything is functioning correctly.

function putHands(flag){
  let show;
  if(flag == true) show= true;
  else show = false;
  for(let i = 0; i < 4; i++){              
    for(let j = 0; j < 13; j++){
      if(i == 0 || i == 1 || i == 2 || i == 3){
        players[i][j].style.left = X;
        players[i][j].style.top = Y;
      }
      if(show == true)
        players[i][j].src = '../images/c'+players[i][j].id+'.gif';
    }
  }
}

Now, I want to include an event listener that changes the src of each object when hovered over. However, my attempts have resulted in an error message whenever I move the mouse over the objects:

Uncaught TypeError: Cannot read property '13' of undefined

javascript html css

Answer 1

Answer №1

To easily refer to the bound element, simply use this.

players[i][j].addEventListener('mouseover', function() {
  this.src = '../images/c'+this.id+'.gif';
});

If not, you'll be using the constantly changing variables i and j within the loop, resulting in unexpected values when the handler is triggered.

In essence, within the assigned handlers, it would end up being...

players[4][13]

...which falls outside of the specified range and is clearly not your intended result.

If you require i and j for other purposes, you can either directly add them to the element itself (if that's acceptable), or establish a new variable scope by creating another function in each iteration of the loop, passing i and j to it, and defining the handler within that scope.

Furthermore, since your function remains consistent across elements now, consider utilizing a single function instead of generating multiple ones in a loop.

function handler() {
   this.src = '../images/c'+this.id+'.gif';
}

function putHands(flag){
  show = !!flag;
  for(var i = 0; i < 4; i++){              
    for(var j = 0; j < 13; j++){
      // ...your code...

      players[i][j].addEventListener('mouseover', handler);
    }
  }
}

This way, one function is efficiently reused for all elements.

Lastly, slightly tangential, but this...

show = !!flag;

can replace this block of code:

if(flag == true) show= true;
else show = false;

It's worth noting that technically they are different due to the evaluation of == not just being based on truthy/falsey conditions. If the specific behavior of == is needed, the following can be used:

show = flag == true;

Answer 2

To easily refer to the bound element, simply use this.

players[i][j].addEventListener('mouseover', function() {
  this.src = '../images/c'+this.id+'.gif';
});

If not, you'll be using the constantly changing variables i and j within the loop, resulting in unexpected values when the handler is triggered.

In essence, within the assigned handlers, it would end up being...

players[4][13]

...which falls outside of the specified range and is clearly not your intended result.

If you require i and j for other purposes, you can either directly add them to the element itself (if that's acceptable), or establish a new variable scope by creating another function in each iteration of the loop, passing i and j to it, and defining the handler within that scope.

Furthermore, since your function remains consistent across elements now, consider utilizing a single function instead of generating multiple ones in a loop.

function handler() {
   this.src = '../images/c'+this.id+'.gif';
}

function putHands(flag){
  show = !!flag;
  for(var i = 0; i < 4; i++){              
    for(var j = 0; j < 13; j++){
      // ...your code...

      players[i][j].addEventListener('mouseover', handler);
    }
  }
}

This way, one function is efficiently reused for all elements.

Lastly, slightly tangential, but this...

show = !!flag;

can replace this block of code:

if(flag == true) show= true;
else show = false;

It's worth noting that technically they are different due to the evaluation of == not just being based on truthy/falsey conditions. If the specific behavior of == is needed, the following can be used:

show = flag == true;

A function that listens for the onmouseover event and updates the image source of an HTML img element

Answer №1

Similar questions

React state update not triggering a component re-render

Navigate to the editing page with Thymeleaf in the spring framework, where the model attribute is passed

What is the best way to highlight selected navigation links?

Adding hue to the portion of text following a JavaScript split() operation

Utilizing inline styles with the asset pipeline feature in Rails

Include a quantity dropdown menu on the cart page of your Shopify store's debut theme

Steps to Activate a Hyperlink for Opening a Modal Dialogue Box and Allowing it to Open in a New Tab Simultaneously

Integrating React js with Layout.cshtml: Mastering the Fusion of React Routing and ASP.NET MVC Routing

delete the initial background color assigned to the button

Utilizing data attributes to configure jQuery plugin settings

Sending AJAX request within a Twitter Bootstrap modal in Symfony2

Node JS does not receive a response from JQuery Ajax

Is there a way to modify the background hue of an upward facing triangle when a submenu is hovered over?

Steps for navigating to a different page by clicking on a gridview row

AJAX requests sent from different origins to AWS S3 may encounter CORS errors on occasion

Expanding the functionality of Element.prototype, problem related to anchor

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

Is there a way to position the icon in the top left corner within the image using Vue and CSS?

Ensuring that the carousel images maintain a consistent size when switching between images

Guidelines on incorporating a dynamically selected option into a dynamically populated dropdown menu