Question :
How to use the code session document.querySelector 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 error is as follows:
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 on:
In the 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 home is set to one of these images in imagem_lista .
( link )
Now for example on the survival mode page of the game quoted there, the theme should soon change the background as well. ( link )
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 the use of .background-image
Hyphens are used for operations in javascript and lack url(...) , to set background-image you should do so:
document.querySelector('body').style.backgroundImage = 'url(' + image + ')';
Note that backgroundImage uses I in the uppercase, if it was font-size, it would get the uppercase S:
document.querySelector('body').style.fontSize
Then for each hyphen the next letter is in the upper case, this rule does not apply to the prefixes -webkit , -moz and -o , for example -webkit-filter should look like this:
document.querySelector('body').style.webkitFilter
However if you’re 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 does not exist the correct is length .
Problem with indexOf
indexOf is not returning data of type true or false
- It returns 0 or more when it finds the string
- Returns -1 when it does not find
Then the correct one 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 to change the background when you find /p/ in the url use 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]);
}