How to put a variable into getElementById.style.backgroundImage

Question

The URL is stored in an Array. I want to use it to change the div background image. But it didn't work. e.g.

<div id = "test"></div>
let arr = [1,2,3,'https://reurl.cc/RX3bkD'];
document.getElementById("test").style.backgroundImage = "url(arr[3])";

What could I do? Any help is appreciated.

@dandavis — The `url()` part is a **vital** bit of CSS syntax — Quentin, Oct 03 '22 at 20:59
@Quentin: fair nuff, good call, though I swore it _used_ to work fine w/o `url()`... — dandavis, Oct 03 '22 at 21:52

score 0 · Answer 1 · answered Oct 03 '22 at 20:41

you are inserting a string into the url instead of the value:

 document.getElementById("test").style.backgroundImage = `url(${arr[3]})`;

score 0 · Answer 2 · answered Oct 03 '22 at 20:43

You can use quotes to append strings and variables together:

document.getElementById("test").style.backgroundImage = "url(" + arr[3] + ")";

Or you can use a template (note the back ticks are needed) instead of quotes.

document.getElementById("test").style.backgroundImage = `url(${arr[3]})`;

2 Answers2