javascript – document.querySelect em body

Question:

How to use the document.querySelector code section to change/change the background image of a page <body>...</body>

Ex:

var imagem_lista = [
    "http://static.gamespot.com/uploads/original/1179/11799911/2324138-warface11.jpg",
    "http://glasshome.tv/wp-content/uploads/2013/10/Warface_Screenshot019_Climb.jpg",
    "http://hq.warface.com/updates/endless-skies/img/WF_ES_019.jpg",
    "http://lodik.ru/uploads/posts/2015-02/1423304948_warface-3.jpg",
    "http://hq.warface.com/updates/siberia/img/wf-update-coldpeak-03.jpg",
    "http://vignette1.wikia.nocookie.net/warface/images/4/43/Warface_WeapCustom_Combat_201.jpg/revision/latest?cb=20130301001625"
];

window.onload=function(){
    var url_pagina = window.location.href;
    if(!url_pagina.indexOf('/p/')){
        var numero_aleatorio = random_number(0, imagem_lista.lenght);
        mudar_imagem(imagem_lista[numero_aleatorio]);
    }
}

function random_number(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function mudar_imagem(image){

  // usar este 
    document.querySelector('body').style.background-image=image;
  // ou este
    $('body').css('background-image', 'url(' + image + ')');
}

And one of the errors is the following:

Uncaught ReferenceError: Invalid left-hand side in assignment

Uncaught ReferenceError: imagem_lista is not defined
    at :2:7
    at Object.InjectedScript._evaluateOn (:905:140)
    at Object.InjectedScript._evaluateAndWrap (:838:34)
    at Object.InjectedScript.evaluate (:694:21)

NOTE: The file containing the script is hosted at:

http://brasilr2.net76.net/js/webmaster.body.js

On line: indexOf

I want to identify when a user accesses my blog to change the background of the image according to a defined theme.

Ex: The blog's home is set to one of these images in imagem_lista . ( http://warfeicebrasil.blogspot.com.br )

Now for example on the survival mode page of the game mentioned there, the theme should change the background soon too. ( http://warfeicebrasil.blogspot.com.br/p/operacao-cold-peak.html )

Answer:

Problem with hyphens

This is wrong :

document.querySelector('body').style.background-image=image;

Note that the error

Uncaught ReferenceError: Invalid left-hand side in assignment

It is caused by using .background-image

Hyphens are used for javascript operations and the url(...) missing, to set the background-image you should do this:

document.querySelector('body').style.backgroundImage = 'url(' + image + ')';

Note that backgroundImage uses capital I , if it were font-size, the S would be capitalized:

document.querySelector('body').style.fontSize

So for each hyphen the next letter is capitalized, this rule only doesn't apply to the -webkit , -moz and -o prefixes, for example -webkit-filter should look like this:

document.querySelector('body').style.webkitFilter

However if you are using jquery (which seems to be the case), then apply with:

$('body').css('background-image', 'url(' + image + ')');

other errors

Another problem is that you wrote imagem_lista.lenght , but lenght doesn't exist, the correct one is length .


Problem with indexOf

indexOf does not return data of type true or false

  • It returns from 0 or more for when it finds the string
  • Returns -1 when not found

So the correct thing would be:

//Se não tiver /p/ na url
if(-1 === url_pagina.indexOf('/p/')){
    var numero_aleatorio = random_number(0, imagem_lista.length);
    mudar_imagem(imagem_lista[numero_aleatorio]);
}

If you want it to change the background when it finds /p/ in the url use it like this:

//Se tiver /p/ na url
if(-1 !== url_pagina.indexOf('/p/')){
    var numero_aleatorio = random_number(0, imagem_lista.length);
    mudar_imagem(imagem_lista[numero_aleatorio]);
}
Scroll to Top