Justo como cabeza a cara, soy nueva en javascript ... Estoy tratando de hacer lo siguiente:

HTML: Tengo un <body id="example> y un contador oculto <input id="counter" value="1">

Y el siguiente javascript (pasando 1 o -1 a través de la función):

function changeBackground(val) {
    "use strict";
    var n = parseInt(document.getElementById("counter").value, 10) + val;

    if (n > 15) {
        n = 1;
    }

    if (n < 1) {
        n = 15;
    }

    document.getElementById("counter").value = n;

    var newBgImage = "\"url(\'../exampleFolder/exampleImg" + n + ".jpg\') no-repeat center center fixed\"";

    document.getElementById("example").style.background = newBgImage;
}

Parece que no puedo hacer que el fondo cambie a la siguiente imagen en la carpeta a la que apunto de "exampleImg1" a "exampleImg2" y así sucesivamente.

Probé esto con un alert(newBgImage) para asegurarme de que estaba escapando de mis citas correctamente y lo estoy, o al menos eso creo (también, esto me dice que se está rompiendo en la última línea de código).

Sé que puedo hacer esto cambiando los nombres de clase y tener clases separadas en el CSS, pero mi CSS sería mucho más limpio haciéndolo de esta manera Y lo probé solo para ver y ni siquiera se actualizaría style.className.

No estoy seguro de qué está pasando mal.

1
joebjoe 12 ene. 2017 a las 14:50

3 respuestas

La mejor respuesta

En realidad, está tratando de establecer dos propiedades diferentes allí. Uno es el fondo y el otro es la posición de fondo. Entonces necesitas dividirlo en 2.

var newBgImage = "url('../exampleFolder/exampleImg" + n + ".jpg')"
document.getElementById("example").style.background = newBgImage;
document.getElementById("example").style.backgroundPosition = "no-repeat center center fixed"

O simplemente no puede establecer la posición de fondo si ya estaba configurada en HTML.

0
Bobby Tables 12 ene. 2017 a las 12:31

El fondo debe ser una cadena. En alerta, ¿está obteniendo algo como esto "url (\ '../ exampleFolder / exampleImg" + n + ".jpg \') centro de repetición de centro fijo"?

En caso afirmativo, la propiedad de estilo se convertiría en:

style="background: "url('../exampleFolder/exampleImg" + n + ".jpg') no-repeat center center fixed""

Esto no funciona porque no es el camino.

Como esto ya es una cadena, lo que debe hacer es lo siguiente:

var newBgImage = "url('../exampleFolder/exampleImg" + n + ".jpg') no-repeat center center fixed";

document.getElementById("example").style.background = newBgImage;

Esto resolvería tu problema.

0
rambo 12 ene. 2017 a las 12:17

Hazme saber si esto funciona

function changeBackground(val) {
"use strict";
var n = parseInt(document.getElementById("counter").value, 10) + val;

if (n > 15) {
    n = 1;
}

if (n < 1) {
    n = 15;
}

document.getElementById("counter").value = n;

var newBgImage = "\"url('../exampleFolder/exampleImg" + n + ".jpg') no-repeat           center center fixed\"";

document.getElementById("example").style.background = newBgImage;
}
0
benjamin.maes 12 ene. 2017 a las 12:15