Can't solve the Javascript error : <p>I am writing a code in which if we hover over the pictures they will be seen in the div tag and also their alt text instead of the tag in div.
The HTML code is:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Photo Gallery&lt;/title&gt;
&lt;link rel="stylesheet" href="css/gallery.css"&gt;
&lt;script src = "js/gallery.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id = "image"&gt;
    Hover over an image below to display here.
&lt;/div&gt;

&lt;img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()"&gt;

&lt;img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()"&gt;

&lt;img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()"&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<blockquote>
  <p>Here is the CSS code:</p>
</blockquote>

<pre><code>body{
    margin: 2%;
    border: 1px solid black;
    background-color: #b3b3b3;
}
#image{
line-height:650px;
    width: 575px;
height: 650px;
    border:5px solid black;
    margin:0 auto;
background-color: #8e68ff;
background-image: url('');
background-repeat: no-repeat;
color:#FFFFFF;
text-align: center;
background-size: 100%;
margin-bottom:25px;
font-size: 150%;
}
.preview{
    width:10%;
    margin-left:17%;
border: 10px solid black;
}
img{
    width:95%;
}
</code></pre>

<blockquote>
  <p>The Javascript code is:</p>
</blockquote>

<pre><code>function upDate(previewPic){
/* In this function you 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 
*/
var urlString = 'url(previewPic.src)';
document.getElementById("image").style.backgroundImage = urlString;
document.getElementById("image").innerHTML = previewPic.alt;

}

function unDo(){
 /* In this function you should 
 1) Update the url for the background image of the div with the id = "image" 
 back to the orginal-image.  You can use the css code to see what that  original URL was

2) Change the text  of the div with the id = "image" 
back to the original text.  You can use the html code to see what that    original text was
*/
var urlString = 'url(image)';
document.getElementById("image").style.backgroundImage = urlString;
document.getElementById("image").innerHTML = image.div;
}
</code></pre>

<p>I have to only know what's wrong with my Javascript code.I have used the debugger already and it's showing errors yet I cannot understand how to solve them.</p>

<p>All the things that need to be done has been given in the comments.When I hover over the picture the text inside the div is updated but it doesn't get undone when I hover outside the picture.And the picture doesn't get updated and undone.So if I could get any help.</p>
