**I'm doing a Coursera assignment that requires me to make the JavaScript code change the background image with the onmouseover event, and then get it back to normal with the onmouseout event as well as putting the alt text of the images in the front every time the event happens, but I've tried a lot of coding these last few days, and the code doesn't work at all, and I don't know why.**

HTML:

```
<div id = "image">Hover over an image below to display here</div>

<img class = "preview" alt = "Beautiful kitten"
src = "https://images2.minutemediacdn.com/image/upload/c_crop,h_1193,w_2121,x_0,y_64/f_auto,q_auto,w_1100/v1565279671/shape/mentalfloss/578211-gettyimages-542930526.jpg"
onmouseover = "update(this)"
 onmouseout = "undo()"/>

<img class = "preview" alt = "Pretty Kitty" 
src = "https://www.thesprucepets.com/thmb/st2K40YnRkWUc3P_01lHYzflk7s=/3558x2363/filters:no_upscale():max_bytes(150000):strip_icc()/Cat-rolling-GettyImages-165893132-58ac5ef05f9b58a3c90a144f.jpg"
onmouserover = "update()" onmouseout = "undo()"/>

<img class = "preview" alt = "Baby cat"
src = "https://i.pinimg.com/originals/5b/8f/4c/5b8f4ca8916661d1c4310bed5e1b76b0.jpg" onmouseover = "update(this)" onmouseout = "undo()"/>

```

JS:

```
    var originalBackground;
function update(previewPic){
/* In this function I should 
    1) change the URL for the background image of the div with the id = "image" 
    to the source file of the preview image

    2) Change the text of the div with the id = "image" 
    to the alt text of the preview image 
    */
   previewPic = document.getElementsByClassName("preview");
   document.getElementById("image").src = previewPic;

    document.getElementById("image").innerHTML = img.getAttribute("alt");

}

function undo(){

    document.getElementById("image").style.backgroundImage = "";

}

```