无法更改div的背景图片

Question

I'm trying to change background-image of a div #image by hovering on thumbnail images (something like a simple slider) My plunker is provided below.

1- First I tried to do like: element.style.backgroundImage but i got this in the console:

2- Then i tried something like element.backgroundImage although it looks good in the console but didnt work, here is the console:

Note: I don't want to use any library, just want to study JavaScript core.

      my plunker

https://plnkr.co/edit/Mk0HSTYvQ4isVKjM7IEt?p=preview

update:

1- I noticed that i was doing wrong interpolation here:

var bgI_value = 'url('+ src + ');';

it should be:

var bgI_value = 'url("'+ src + '");';

2- The suggestion from Alexandru to remove the simicolon was a good point.

3- the suggestion from Sharma to add .style.backgroundImage was a good point too.

so my code was missing these three corrections!

Thanks all.

Answer 1

The issue is in the way you are changing the background image:

image.backgroundImage= bgI_value;

What it should be is:

image.style.backgroundImage= bgI_value;

Note that this here is correct:

var bgI_value = 'url('+ src + ')';

Here is the Plunker: https://plnkr.co/edit/NX1cgmzudJjFbM80q3eI?p=preview

Answer 2

Here is your solution:

Please change

var bgI_value = 'url('+ src + ');';

TO

var bgI_value = 'url('+ src + ')';