イベントの実行に問題があります

VR R

以下の外部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.";
}
TSRワード

これはバニラ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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

イベントハンドラーの登録に問題があります

分類Dev

pygameのイベントループに問題があります

分類Dev

イベントシステムの理解に問題があります

分類Dev

PerlスクリプトのIFステートメントの実行に小さな問題があります。

分類Dev

LibreOfficeのインストールに問題があります

分類Dev

cocoapodsのインストールに問題があります

分類Dev

cocoapodsのインストールに問題があります

分類Dev

cocoapodsのインストールに問題があります

分類Dev

OpenSSLCocoapodのインストールに問題があります

分類Dev

spacyのインストールに問題があります

分類Dev

PyTorchのインストールに問題があります

分類Dev

g ++のインストールに問題があります

分類Dev

LibreOfficeのインストールに問題があります

分類Dev

SimpLESSのインストールに問題があります

分類Dev

skllearnのインポートに問題があります

分類Dev

PILのインストールに問題があります

分類Dev

tensorflowのインストールに問題があります

分類Dev

IntelHAXMのインストールに問題があります

分類Dev

Emojione領域により、非表示のtextareaイベントの実行で問題が発生する

分類Dev

sudo visudoコマンドの実行に問題がありますか?

分類Dev

ラズベリーパイにgnupgをインストールするのに問題があります

分類Dev

INSERTINTOステートメントでCOUNTの実行に問題があります

分類Dev

ugetの実行に問題があります

分類Dev

ScrapoxyとDigitalOceanの実行に問題があります

分類Dev

ugetの実行に問題があります

分類Dev

.bashscrptの実行に問題があります

分類Dev

アプリの実行に問題があります

分類Dev

Astrophysics-Code(HARM)をインストールしようとしていますが、「make」コマンドの実行に問題があります

分類Dev

jQuery を使用してウェイポイントを取得できません (html でのスクリプトの実行に問題があります)

Related 関連記事

  1. 1

    イベントハンドラーの登録に問題があります

  2. 2

    pygameのイベントループに問題があります

  3. 3

    イベントシステムの理解に問題があります

  4. 4

    PerlスクリプトのIFステートメントの実行に小さな問題があります。

  5. 5

    LibreOfficeのインストールに問題があります

  6. 6

    cocoapodsのインストールに問題があります

  7. 7

    cocoapodsのインストールに問題があります

  8. 8

    cocoapodsのインストールに問題があります

  9. 9

    OpenSSLCocoapodのインストールに問題があります

  10. 10

    spacyのインストールに問題があります

  11. 11

    PyTorchのインストールに問題があります

  12. 12

    g ++のインストールに問題があります

  13. 13

    LibreOfficeのインストールに問題があります

  14. 14

    SimpLESSのインストールに問題があります

  15. 15

    skllearnのインポートに問題があります

  16. 16

    PILのインストールに問題があります

  17. 17

    tensorflowのインストールに問題があります

  18. 18

    IntelHAXMのインストールに問題があります

  19. 19

    Emojione領域により、非表示のtextareaイベントの実行で問題が発生する

  20. 20

    sudo visudoコマンドの実行に問題がありますか?

  21. 21

    ラズベリーパイにgnupgをインストールするのに問題があります

  22. 22

    INSERTINTOステートメントでCOUNTの実行に問題があります

  23. 23

    ugetの実行に問題があります

  24. 24

    ScrapoxyとDigitalOceanの実行に問題があります

  25. 25

    ugetの実行に問題があります

  26. 26

    .bashscrptの実行に問題があります

  27. 27

    アプリの実行に問題があります

  28. 28

    Astrophysics-Code(HARM)をインストールしようとしていますが、「make」コマンドの実行に問題があります

  29. 29

    jQuery を使用してウェイポイントを取得できません (html でのスクリプトの実行に問題があります)

ホットタグ

アーカイブ