Use javascript for a background image

Question

I have looking other post for this problem (because there are, of course). But I even didn't succeed with the answer of these other post.

Then, my issue :

I have the following script to open an image randomly

<script> function banner()
{var img = new Array();
img[0]='images/hochbau1.jpg';
img[1]='images/hochbau2.jpg';
img[2]='images/hochbau3.jpg';
img[3]='images/hochbau4.jpg';
img[4]='images/hochbau5.jpg';
img[5]='images/hochbau6.jpg';
img[6]='images/hochbau7.jpg';
img[7]='images/hochbau8.jpg';
img[8]='images/hochbau9.jpg';
img[9]='images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.write(img[n]);
} </script> 

Then, I would like to have this images in this (instead of images/hochbau.jpg) :

 <div class="section22" style="background-image:url(images/hochbau.jpg); "> </div>

Then, I tried this:

 <div class="section22" style="background-image:url(<script> banner(); </script>);"> </div> 

or this

<div class="section22" style="background-image:url(
                   <script type="text/javascript" language="javascript">
                       document.write('images/hochbau'+ Math.round((Math.random()*9)+1)+ '.jpg');
                  </script>
                  ); "> </div>

Then, I changed the script as :

<script> function banner()
{var img = new Array();
img[0]='images/hochbau1.jpg';
img[1]='images/hochbau2.jpg';
img[2]='images/hochbau3.jpg';
img[3]='images/hochbau4.jpg';
img[4]='images/hochbau5.jpg';
img[5]='images/hochbau6.jpg';
img[6]='images/hochbau7.jpg';
img[7]='images/hochbau8.jpg';
img[8]='images/hochbau9.jpg';
img[9]='images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.getElementById('myPElement').style.backgroundImage = 'url(img[n])';

} </script> 

with the following

<div class="section22" id="myPElement">

But nothing is working..... maybe I am closed to the solution but I am stuck...

if you have some observation, please tell me ! many thanks for your help

Answer 1

You are just not referencing the image correctly in your script

<script> function banner()
{var img = new Array();
img[0]='images/hochbau1.jpg';
img[1]='images/hochbau2.jpg';
img[2]='images/hochbau3.jpg';
img[3]='images/hochbau4.jpg';
img[4]='images/hochbau5.jpg';
img[5]='images/hochbau6.jpg';
img[6]='images/hochbau7.jpg';
img[7]='images/hochbau8.jpg';
img[8]='images/hochbau9.jpg';
img[9]='images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.getElementById('myPElement').style.backgroundImage = 'url(' + img[n] +')';  //you are passing img[n] as string, just change this

} </script> 

EDIT: I see your page: http://www.mytmedia.craym.eu/HRPwebsite/index.php

from the code inspect I see banner() function is never executed, and also if I try to execute it in the console the backround image is set correcty but your iamges are not there:

Answer 2

这应该工作

document.getElementById("myPElement").style.backgroundImage = "url("+img[n]+")";

Answer 3

hi and many thanks for your help....

The things which was wrong in my code was : 1- using a function in script. I had to just using script but without "function" 2- and of course the form 'url(img[n])' wich was wrong..

The code wich work for me (i have tested on local, i had to test it online)

                <div id="myPElement" class="section22" ></div>
            <script> 
                var img = new Array();
                img[0]='http://localhost:8888/images/hochbau1.jpg';
                img[1]='http://localhost:8888/images/hochbau2.jpg';
                img[2]='http://localhost:8888/images/hochbau3.jpg';
                img[3]='http://localhost:8888/images/hochbau4.jpg';
                img[4]='http://localhost:8888/images/hochbau5.jpg';
                img[5]='http://localhost:8888/images/hochbau6.jpg';
                img[6]='http://localhost:8888/images/hochbau7.jpg';
                img[7]='http://localhost:8888/images/hochbau8.jpg';
                img[8]='http://localhost:8888/images/hochbau9.jpg';
                img[9]='http://localhost:8888/images/hochbau10.jpg';
                var n=Math.round((Math.random()*9));
                document.getElementById("myPElement").style.backgroundImage = "url(" + img[n] +")";
            </script> 

Evrything is working now.... the photos appear randomly....

Many thank again for your help !