執行事件時出錯

-2

更新後的外部JS代碼下面 我試圖執行一個簡單的相冊。我的課的任務是將鼠標懸停在一個小圖像上，並在更大的框中顯示替代文字和圖像，並且當鼠標離開文本時，背景圖像應該顯示爲原始的以下是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'); 
    document.getElementById('image').innerHTML = PreviewPic.alt; 
    document.getElementById('image').backgroundImage =imageLarge.src; 
} 

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

來源

2016-06-17 VR R

所以發生了什麼（或者沒有發生）？您在開發者控制檯中遇到什麼錯誤？請注意，沒有'getElementByClass'這樣的函數。你的意思是'getElementsByClassName'？ – j08691

用更新的JS功能（見上文）我得到在控制檯沒有錯誤，當我徘徊，但只有文字變化激活，圖像/背景沒有改變@ j08691 –

這一個工程香草JS和我評論了很多的東西，你說你這樣做是對一類如果一個編碼類希望這可以幫助你學習。代碼片段的作品，但沒有一個很好的方式風格，所以在你的編輯器試試你與CSS。

//grabing the ellements by 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"); 
 

 

 
//add eventlisteners to events 
 
//this can be done in the html; but i prefer it in the javaScript 
 
// event listeners for first img 
 
imgOne.addEventListener("mouseover", function() { 
 
    displayImg.src = imgOne.src; 
 
    displayText.innerHTML = imgOne.alt; 
 
}); 
 
// to replace 
 
imgOne.addEventListener("mouseout", function() { 
 
    displayImg.src = ""; 
 
    displayText.innerHTML = "Hover over an image below to display here."; 
 
}); 
 

 
// event listeners for second img 
 
// adds the stuff 
 
imgTwo.addEventListener("mouseover", function() { 
 
    displayImg.src = imgTwo.src; 
 
    displayText.innerHTML = imgTwo.alt; 
 
}); 
 
// reverts stuff 
 
imgTwo.addEventListener("mouseout", function() { 
 
    displayImg.src = ""; 
 
    displayText.innerHTML = "Hover over an image below to display here."; 
 
}); 
 

 
// event listener for third img 
 
imgThree.addEventListener("mouseover", function() { 
 
    displayImg.src = imgThree.src; 
 
    displayText.innerHTML = imgThree.alt; 
 
}); 
 
imgThree.addEventListener("mouseout", function() { 
 
    displayImg.src = ""; 
 
    displayText.innerHTML = "Hover over an image below to display here."; 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Photo Gallery</title> 
 
    <link rel="stylesheet" href="css/gallery.css"> 
 
</head> 
 
<body> 
 

 
    <div id = "image"> 
 
<!-- you could create a text node and append it rather than adding a p tag 
 
     but hard codeing it is a little easier --> 
 
    <img src="" alt="" id="displayImg"> 
 
    
 
    <p id="displayText">Hover over an image below to display here.</p> 
 
    </div> 
 

 
    <img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" id="img1"> 
 

 
    <img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" id="img2"> 
 

 
    <img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" id="img3"> 
 
<!-- i moved the script to the bottom so that you're html will load before the js 
 
     this can prevent some "can not get/append/set ****** to undefined" errors. 
 
     (i've heard either way is fine but this just the way i learned)--> 
 
<script src="main.js"></script> 
 
</body> 
 
</html>

來源

2016-06-17 20:56:56

謝謝評論真的有幫助@TSR –

我只是很高興我可以幫助，並歡迎堆棧溢出。如果你能接受一個很棒的答案。 :) –

更新後的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."; 
}

更新函數將使用onmouseover=""的(this)值時，該元素將是PreviewPic，此變量將被用於插入在src和alt到#image元件。我沒有編輯unDo功能，這將重置#image元素的innerHTML。

來源

2016-06-17 15:37:05

沒有這樣的運氣:( –

我用角，女巫結束了;但它的工作原理，你可以輕鬆地添加更多的圖像。 :)

var app = angular.module("MainApp", []); 
 

 
app.controller("mainController", ["$scope", function($scope) { 
 
    $scope.display = {}; 
 
    $scope.album = [{ 
 
     img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg", 
 
     name: "Styling with a Bandana" 
 
    }, { 
 
     img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG", 
 
     name: "With My Boy" 
 
    }, { 
 
     img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg", 
 
     name: "Young Puppy" 
 
    }]; 
 
    
 
    $scope.newDisplay = function(item) { 
 
     $scope.display = item; 
 
    } 
 
    
 
}]);

div.gallery { 
 
    box-sizing: border-box; 
 
    width: 33%; 
 
    display: inline-block; 
 
}

<!DOCTYPE html> 
 
<html lang="en" ng-app="MainApp"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Photo Gallery</title> 
 
    <link rel="stylesheet" href="main.css"> 
 
    <!-- <link rel="stylesheet" href="css/gallery.css">--> 
 
</head> 
 

 
<body ng-controller="mainController"> 
 
    <div class="display" ng-model="display"> 
 
     <img ng-src="{{ display.img }}" alt=""> 
 
     <h1>{{ display.name }}</h1></div> 
 
    <div class="gallery" ng-repeat="item in album" ng-mouseover="newDisplay(item)"> 
 
     <img ng-src="{{ item.img }}" alt=""> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script> 
 
    <script src="app.js"></script> 
 
</body> 
 

 
</html>

來源

2016-06-17 18:12:07

有什麼辦法在不改變HTML的情況下讓tT工作？@TSR –

我會給它一個鏡頭:);你還想爲vanila js？ –

執行事件時出錯

回答

相關問題