Rahul Singh Rahul Singh - 6 months ago 69
HTML Question

Can't solve the Javascript error

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:

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

<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()">

<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()">

<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()">

</body>
</html>



Here is the CSS 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%;
}



The Javascript code is:


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;
}


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.

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.

Answer

Your issue is that you're not escaping your variables. Your progmatically generated CSS has the literal value of url(previewPic.src), which tries to find the nonexistent previewPic.src file on your server. Instead, you need to concatenate the strings with the variable.

var urlString = 'url(' + previewPic.src + ')';

Or, another possibility, depending on how important browser compatibility is to you, you could use a template literal instead.

var urlString = `url(${previewPic.src})`;

Note the backticks, and the escape sequence of ${} with in the template literal.

To get the original text back, you can't call on the original element, since the text is overwritten when you set the innerHTML on it.

Instead, just reset the innerHTML to the value you gave it initially in the HTML.

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 = 'Hover over an image below to display here.';
}
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%;
}
  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
<script src = "js/gallery.js"></script>
</head>
<body>
<div id = "image">
    Hover over an image below to display here.
</div>

<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()">

<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()">

<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()">

</body>
</html>