Problem with .style.backgroundImage

Using JavaScript with Hype
1

Hi,
I have a very complex infographic and have a problem using the javascript property style.backgroundImage with a variable in the “url(…)”…I tried with a direct url and worked perfectly as “url(’”+my.url.svg+"’)"…but can’t make it work with a variable in the url…I attach a mini sandbox project which has only the important stuff so its easier for you to help me solve my problem.

Though I have learnt a bit of javascript through web tutorials, I’m not an expert. Please help me, I’m getting crazy trying to find out whats happening.

Thanks.

Prueba.hype.zip (21.0 KB)

2

@mars

In your Informacion de Destinos .js file you only have 2 properties filled out, so the remaining 2 are empty and return undefined.

“Chingaza”: {
“Actividades”: {
“Actividad_1”: “Caminata”,
“Actividad_2”: “Acampada”,
“Actividad_3”: “”,
“Actividad_4”: “”
},

3

Thank you for your reply but even if I fill the blank spaces it doesn’t work.

Prueba.hype.zip (21.1 KB)

4

Oddly the “${resourcesFolderName}/” part that is coming from the Actividades js object is not being expanded into the full path.

Which thinking about it may make sense if the ${resourcesFolderName} needs to be parsed before any other external js is loaded.

In the mean time remove all the ${resourcesFolderName}/ from the Actividades js file’s code.

And use this

document.getElementById("Imagen_"+i).style.backgroundImage = "url(${resourcesFolderName}/" + Lolo + ")";

2 Likes
5

Thank you for your help, it worked perfectly!!!