Document.querySelect in body

Question

Document.querySelect in body

Asked 9 years, 4 months ago

Viewed 76 times

3

How to use 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 mistakes is this::

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:

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

On the line: indexof

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

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

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

1 answer

Browser other questions tagged javascript jquery html array

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2015-07-29T21:20:55+00:00

Trouble with the 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 javascript operations and missed the url(...), to set the background-image you must do so:

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

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

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

So for each hyphen the next letter is uppercase, this rule only does not apply to prefixes -webkit, -moz and -o, for example -webkit-filter should look like this:

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

However if you are using jquery (which looks like the case), then apply with:

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

Other mistakes

Another problem is that you wrote imagem_lista.lenght, but lenght there is no right is length.

Problem with the index

indexOf is not returns type data true or false

It returns 0 or more for when you find the string
Returns -1 when not found

Then the right 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 him to change the background when he finds it /p/ in the url use so:

//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]);
}