how to change the background image of div using javascript?

Question

this is my code

<div style="text-align:center;">   <div class="ghor" id="a" onclick="chek_mark()"></div>   function call </div> <script type="text/javascript">   function chek_mark(){    var el= document.getElementById("a").style.background-image;    if (el.url("Black-Wallpaper.jpg"))      {      el.url = "cross1.png";     }     else if(el.url("cross1.png"))     {       alert("<h1>This is working too.</h1>");      }    } </script> 

here I want to change the background image using if else condition

this is the style-sheet .ghor //this is the div class {     background-image: url('Black-Wallpaper.jpg');     background-size: cover;     border-radius: 5px;     height: 100px;     width: 100px;     box-shadow: 2px 5px 7px 7px white;     /*background-color: black;*/     display:inline-block;  } 

i want change the background image of the 'div' which class is 'ghor'

Answer 1

Try this:

document.getElementById('a').style.backgroundImage="url(images/img.jpg)"; // specify the image path here 

Hope it helps!

Answer 2

try this one!

var el = document.getElementById("a").style.backgroundImage; if(el == "url(Black-Wallpaper.jpg)") { // full value is provided    el.style.backgroundImage = "url(/link/to_new_file.png)"; // change it }