可以't解决Javascript错误
Can't solve the Javascript error
我正在写一段代码，如果我们将鼠标悬停在图片上，它们将出现在div标记中，以及它们的alt文本中，而不是div中的标记中。HTML代码是：
<!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>
这是CSS代码：
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%;
}
Javascript代码是：
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;
}
我只需要知道我的Javascript代码出了什么问题。我已经使用了调试器，它显示错误，但我不知道如何解决它们。
所有需要做的事情都在评论中给出了。当我将鼠标悬停在图片上时，div内的文本会更新，但当我将光标悬停在图片外时，它不会被撤消。而且图片不会被更新和撤消。所以如果我能得到任何帮助的话。
这里有鼠标悬停时的图像和alt文本切换效果。。。把原来的内容放回鼠标上。
<!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>
<style>
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('https://static.pexels.com/photos/8700/wall-animal-dog-pet.jpg'); /* Original image was missing */
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%;
}
</style>
</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()">
<script>
function upDate(previewPic){
var urlString = 'url('+previewPic.src+')';
document.getElementById("image").style.backgroundImage = urlString;
document.getElementById("image").innerHTML = previewPic.alt;
}
function unDo(){
var urlString = "url('https://static.pexels.com/photos/8700/wall-animal-dog-pet.jpg')";
document.getElementById("image").style.backgroundImage = urlString;
document.getElementById("image").innerHTML = "Hover over an image below to display here.";
}
</script>
</body>
</html>
您的问题是没有转义变量。程序生成的CSS的文字值为url(previewPic.src)，它试图在服务器上查找不存在的previewPic.src文件。相反，您需要将字符串与变量连接起来。
var urlString = 'url(' + previewPic.src + ')';
或者，另一种可能性是，根据浏览器兼容性对您的重要性，您可以使用模板文字。
var urlString = `url(${previewPic.src})`;
请注意模板文字中${}的倒勾号和转义序列。
为了取回原始文本，你不能调用原始元素，因为当你在上面设置innerHTML时，文本会被覆盖
相反，只需将innerHTML重置为最初在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 = 'none';
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>我认为问题在于var urlString = 'url(previewPic.src)';&var urlString = 'url(image)';
如果我没有错的话，它必须像这个
var urlString = "url('previewPic.src')" // Note the quotes
查看W3School了解更多信息
相关文章：
- 可以't解决Javascript错误
- 我如何使用javascript来解决这个等式
- 有人能帮我理解为什么这个JavaScript代码赢得'不起作用，以及我如何解决它
- 我该如何解决这个问题;参考网格”;在JavaScript中完成的对象数
- 解决 JavaScript 和数据库表逻辑情况
- Django，推荐在块中声明和解决JavaScript依赖关系的方法
- 循环使用随机变量和数组来解决javascript的多重包含问题
- 解决javascript中文档未就绪的原因
- 如何解决Javascript中的圈复杂性
- 正在解决Javascript冲突
- 如何解决javascript中的TypeError:getElementById为null
- 解决javascript变量名冲突，而不是iframe
- 解决Javascript冲突/ jquery
- 如何解决JavaScript中缺少参数列表
- 如何解决javascript中使用引号的c# Json序列化解析
- 如何解决javascript的CPP中的新行问题
- 我如何解决javascript或http错误在wkhtmltopdf
- 如何解决javascript的漏洞问题
- 如何解决Javascript作用域问题.结束是答案吗?
- 如何解决Javascript未捕获的下拉列表更改时的引用错误
