Javascript 执行事件时出现问题_Javascript

Javascript 执行事件时出现问题

javascript

Javascript 执行事件时出现问题,javascript,Javascript,更新了下面的外部JS表代码我正在尝试执行一个简单的照片库。我的类的任务是将鼠标悬停在一个小图像上，并在较大的框中显示alt文本和图像，当鼠标离开文本时，背景图像应显示为原来的样子以下是html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Photo Gallery</title> <link r

更新了下面的外部JS表代码 我正在尝试执行一个简单的照片库。我的类的任务是将鼠标悬停在一个小图像上，并在较大的框中显示alt文本和图像，当鼠标离开文本时，背景图像应显示为原来的样子以下是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>

更新后的javascript，我希望它能工作，因为我还没有测试过它：

function upDate(PreviewPic){
    var imageLarge = document.getElementById("image");
    imageLarge.innerHTML += '<img src="'+PreviewPic.src+'">';
    imageLarge.innerHTML += PreviewPic.alt;
}

function unDo(){
    document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}

函数更新（预览WPIC）{
var imageLarge=document.getElementById（“图像”）；
imageLarge.innerHTML+=''；
imageLarge.innerHTML+=PreviewPic.alt；
}
函数unDo（）{
document.getElementById（'image'）.innerHTML=“将鼠标悬停在下面的图像上，在此处显示。”；
}

更新功能将使用

（this）

onmouseover=“的值，this元素将是PreviewPic，此变量将用于将src和alt插入

#image

元素。我没有编辑撤销功能，这将重置

#image

元素的innerHTML。

我使用了angular，witch is over kill；但它可以工作，您可以轻松添加更多图像。：）

var-app=angular.module（“MainApp”，[]）；
app.controller（“主控制器”、[“$scope”、函数（$scope）{
$scope.display={}；
$scope.album=[{
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg",
名称：“用大手帕做造型”
}, {
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG",
名字：“和我的孩子”
}, {
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg",
名称：“幼犬”
}];
$scope.newDisplay=功能（项）{
$scope.display=项目；
}
}]);
div.gallery{
框大小：边框框；
宽度：33%；
显示：内联块；
}

照片库
{{display.name}
这一个可以用vanilla js，我评论了很多东西，你说你是为了一个类而做的，如果它是一个编码类，希望这能帮助你学习。代码snipit可以用，但样式不好，所以请在你的css编辑器中试用

//按id抓取元素
var imgOne=document.getElementById（“img1”）；
var imgTwo=document.getElementById（“img2”）；
var imgThree=document.getElementById（“img3”）；
var displayText=document.getElementById（“displayText”）；
var displayImg=document.getElementById（“displayImg”）；
//将eventlisteners添加到事件
//这可以在html中完成；但我更喜欢用javaScript
//第一个img的事件侦听器
addEventListener（“mouseover”，函数（）{
显示img.src=imgOne.src；
displayText.innerHTML=imgOne.alt；
});
//取代
addEventListener（“mouseout”，函数（）{
displayImg.src=“”；
displayText.innerHTML=“将鼠标悬停在下面的图像上，在此处显示。”；
});
//第二个img的事件侦听器
//添加内容
imgTwo.addEventListener（“鼠标悬停”，函数（）{
显示img.src=imgTwo.src；
displayText.innerHTML=imgTwo.alt；
});
//还原材料
imgTwo.addEventListener（“mouseout”，函数（）{
displayImg.src=“”；
displayText.innerHTML=“将鼠标悬停在下面的图像上，在此处显示。”；
});
//第三个img的事件侦听器
imgThree.addEventListener（“鼠标悬停”，函数（）{
显示img.src=imgThree.src；
displayText.innerHTML=imgThree.alt；
});
imgtree.addEventListener（“mouseout”，函数（）{
displayImg.src=“”；
displayText.innerHTML=“将鼠标悬停在下面的图像上，在此处显示。”；
});

照片库
将鼠标悬停在下面的图像上，在此处显示
那么发生了什么（或没有发生）？开发人员控制台中会出现哪些错误？请注意，没有像getElementByClass
这样的函数。你的意思是GetElementsByCassName？通过更新的JS函数（见上文），我在控制台中悬停时没有收到任何错误，但只有文本更改被激活，图像/背景没有改变@J08691有没有办法让ti在不改变HTML的情况下工作@TSRi会试一试：）；另外，你还打算使用vanila js吗？谢谢你的评论，真的帮助了@TSRIm，很高兴我能提供帮助，欢迎来到stack overflow。如果你能接受一个非常棒的答案。：）
function upDate(PreviewPic){
    var imageLarge = document.getElementById("image");
    imageLarge.innerHTML += '<img src="'+PreviewPic.src+'">';
    imageLarge.innerHTML += PreviewPic.alt;
}

function unDo(){
    document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}