entre Desarrolladores

Question

Hola gente. Estoy dando mis primeros pasos en JavaScript y estoy trabado con esto.

Tengo un <div> donde dependiendo de un evento onclick en otro lado, se carga determinada imagen de fondo.
Mi idea fue almacenar la url en una variable de la siguiente manera:

var rutaImagen = 'imagenes/' + variable + 'X.jpg';

de esa manera, construyo perfectamente la ruta en un string y lo almaceno ahí.
El problema viene cuando lo quiero usar. Lo que probé (y no funcionó) fue esto:

document.getElementById("idDelDivTarget").style.backgroundImage = 'url(rutaImagen)';

Cual es la mejor manera o la manera correcta de hacer lo que estoy intentando?
Desde ya, muchas gracias!

Answer 1

2 Respuestas

Answer 2 · 2015-11-16T21:03:06+0000

Después de leer bastante encontré la solución, que pongo a continuación por si alguien anda en la misma. Muchísimas gracias por tu ayuda Leonardo-Tadei!

<body>

<h1>Hola!</h1>
<button type="button" onclick="myFunction()">Poner Fondo</button>
<script>

function myFunction() {
    var ruta = "http://zoarchurch.co.uk/content/pages/uploaded_images/91.png";
    document.body.style.backgroundColor = "#f3f3f3";
    document.body.style.backgroundImage = "url(" + ruta + ")";
}
</script>

</body>
</html>

Leonardo-Tadei · Answer 3 · 2015-11-15T16:45:54+0000

3votos

Leonardo-Tadei Puntos227320

Hola @catulo,

la sintaxis que estás usando para poner la imagen de fondo es correcta.

Verificá las siguientes cosas que te pueden estar fallando:

que el DIV tenga por ID exactamente "idDelDivTarget", respetando mayúsculas y minúsculas.
que el URL de la imagen esté funcionando (probá esto mostrándolo por pantalla y copiando el URL en el navegador para ver que cargue la imagen).
que la porción de código que asigna el fondo se esté invocando (probá esto poniendo un console.log('akata'); en la línea anterior y fijate que aparezca en la consola de depurado)
encerrá el contenido de rutaImagen entre comillas, para que funcione con rutas con espacios o caracteres raros
```
document.getElementById("idDelDivTarget").style.backgroundImage = 'url("rutaImagen")';
```

Después contanos!

respondido por Leonardo-Tadei (227.320 puntos) Nov 15, 2015

0voto

catulo comentado Nov 15, 2015

Hola Leonardo. Gracias por la respuesta. Todas estas cosas que me sugerís las revisé de diferentes maneras y estaban correctas. Mañana me voy a sentar un rato a hacer un análisis minucioso.
Es posible que el problema sea porque la propiedad no acepta que ponga la URL con una variable?

comentado por catulo (260 puntos) Nov 15, 2015

editado por Leonardo-Tadei Nov 16, 2015

0voto

Leonardo-Tadei comentado Nov 16, 2015

Hola @catulo,

no debería tener que ver con que el valor esté en un avariable o no, ya que para esto están las variables!

Lo que sí puede ser es que estés asumiento un reemplazo de variables que JavaScript (a diferencia de PHP) no hace en los string. Pensaba que tu código era ilustrativo y no litaral. El código para que funcione debe concatenar los valores:

document.getElementById("idDelDivTarget").style.backgroundImage = 'url("'.rutaImagen. ")';

Si esto no es, poné la porción de código en JSFiddle o similar para que la podamos analizar.

Saludos!

comentado por Leonardo-Tadei (227.320 puntos) Nov 16, 2015

0voto

catulo comentado Nov 16, 2015

A ver, te paso un pequeño código simplificado de lo que quiero hacer, y que no funciona

Codigo en JSFiddle

<html>
<body>

<h1>Hola!</h1>
<button type="button" onclick="myFunction()">Poner Fondo</button>
<script>

function myFunction() {
    var ruta = "http://zoarchurch.co.uk/content/pages/uploaded_images/91.png";
    document.body.style.backgroundColor = "#f3f3f3";
    document.body.style.backgroundImage = 'url(".ruta.")';
}
</script>

</body>
</html>

comentado por catulo (260 puntos) Nov 16, 2015

editado por Peter Nov 16, 2015

Pregunta

uso de url almacenada en variable con style.backgroundImage

Por favor, accede o regístrate para añadir un comentario.

2 Respuestas

Por favor, accede o regístrate para añadir un comentario.

catulo comentado Nov 15, 2015

Leonardo-Tadei comentado Nov 16, 2015

catulo comentado Nov 16, 2015

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para responder a esta pregunta.

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

mchojrin respondió Dic 9

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta