Question

I have a javascript function named “background_url” that outputs
a random background image.

I’m trying to call the function in this way:

 <td style="<script type="text/javascript">background_url();</script>"></td>

but the only thing outputted in my browser is:

a string “background_url();”

The javascript function is as follows

function background_url(){

var myimages=new Array()
myimages[1]="images/img1.jpg"
myimages[2]="images/img2.jpg"
myimages[3]="images/img3.jpg"   
//call a random function that returns id of image etc               
     document.write('background-image: url('+myimages[id]+')');
}
       </script>

The background image is not shown,what can i do in order to fix that?

Thanks, in advance

Answer 1

Don’t.

Do it the right way.

Give the td element a class (if there are more than one that share the background) or an id (if this element is unique) and use JavaScript to set the style using the appropriate selector.

var tds = document.querySelectorAll('td.some-class-name');
for(var i = 0; i < tds.length; i++){
    var td = tds[i];
    td.style.backgroundImage = 'url(' + randomImageUrl + ')';
}

Or, if you’re using a library like jQuery, it’s a little easier:

$('td.some-class-name').css('background-image','url(' + randomImageUrl + ')');