specifying the background image for a div using the value supplied in a text box

[arvindikchari]

Hello

I have a form where the user specifies a bg image url, and I want it to be set as the background image for a div.

The code for the div is as below:

<div class="dc m1_t" >
														<div class="dt m1_b" >
															<div class="dr">
																<div class="dc m1_pad" >
																	<span class="m1_h_text">Manufacturers:</span><br>
																	<img alt="" src="images/spacer.gif" width="1" height="12"><br>
																	<select class="sel1"><option>&nbsp; Sony</option></select>
																</div>
															</div>
														</div>
													</div>

I want that the bg image for the div with class value "dc m1_t" should be set to the value supplied in text box "s_bkbgiu". Is a div ID needed for this to be accomplished. How will this be coded

Thanks
Arvind

[Fungus1487]

use a javascript library with CSS selectors such as jQuery. You can then perform a css selector query to get the node your after. Example

$('.dc').filter('.m1_pad').css('background-image', 'url(' + url + ')');

There are many other very good CSS based javascript libraries

[arvindikchari]

I have heard that this can be accomplished using Pure Javascript without use of any library. Please tell me how to do this using pure javascript without any external library

Regards
Arvind

[Fungus1487]

why not just use an ID

document.getElementById('myDiv').style.background = 'url(' + url + ')';

if your deperate to use classes and write your own code you will have to perform something like so

var divs = document.getElementsByTagName('div');
var url = document.getElementById('textbox').value;
for(var i = 0; i < divs.length; i ++) {
    if(divs[i].classname == 'dc m1_t') {
        divs[i].style.background = 'url(' + url + ')';
        break;
    }
}