イベントの実行中に問題が発生しました。

-2

外部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'); 
    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 –

、あなたは、コードクラスがうまくいけば、これはあなたが学ぶことができますその場合、クラスのためにそれをやっていると述べました。コードスニピットは機能しますが、良い方法でスタイルされていないので、あなたの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."; 
}

upDate関数はonmouseover=""の(this)の値を使用します。この要素はPreviewPicになります。この変数はsrcとaltを#image要素に挿入するために使用されます。私はunDo関数を編集していないので、#image要素のinnerHTMLがリセットされます。

出典

2016-06-17 15:37:05

そのような運はありません:( –

私は角を使用しました。それは動作し、あなたは簡単に多くの画像を追加することができます。 :)この1つはバニラJSの作品と私は多くのものをコメントし

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

totはHTMLを変更せずに仕事をしますか？@TSR –

私はそれにショットをつけます:);また、あなたはvanila jsに行くのですか？ –

イベントの実行中に問題が発生しました。

答えて

関連する問題