Question

100％停留在家庭作业上...

我有一些简单的JavaScript，旨在在将鼠标悬停在某些图像上时更改div的背景图像和文本。但是，我现在要执行的是在将鼠标移出时将div恢复到其原始状态。

我能够还原divs背景颜色

document.getElementById('image').style.backgroundImage = "";

本质上是杀死背景图像，并迫使其恢复为页面加载时的背景颜色。

现在我要做的是存储原始的innerHTML文本“将鼠标悬停在下面的图像上以显示在这里”。作为变量

var originalText = document.getElementById('image').innerHTML;

，然后在需要时回叫。

  function unDo() {
        document.getElementById('image').style.backgroundImage = "";
        document.getElementById('image').innerHTML = originalText;

但是

var originalText = document.getElementById('image').innerHTML;

返回“ undefined”，这意味着在存储变量时我已经搞砸了，对吧？我也尝试过innerText，这似乎对我没有多大作用。下面是下面的完整HTML和JavaScript。

/*Name this external file gallery.js*/
var originalText = document.getElementById('image').innerHTML;

function upDate(previewPic) {
    document.getElementById('image').innerHTML = previewPic.alt;
    document.getElementById('image').style.backgroundImage = "url('" + previewPic.src + "')";

    /* 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 
       */

}

function unDo() {
    document.getElementById('image').style.backgroundImage = "";
    document.getElementById('image').innerHTML = originalText;

  

    /* 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
   */

}

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" xmlns="http://www.w3.org/1999/xhtml">
<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>

注意：我不允许更改此作业的HTML。只有JavaScript。您不必为我做功课。但是，朝着正确方向的提示会很好。

screenshotoflocalenvironment

Answer 1

由于您的html中的script标签位于主体上方，因此可能会发生这种情况。

当您在脚本开头声明“原始文本”变量时，页面尚未加载，因此页面返回未定义状态，因为它无法在带有“ image”类的文档中找到任何内容

有时加载速度可能足够快，有时则加载速度不够

相反，将html中的脚本标签移到body标签正下方。因此，脚本在正文加载后加载。应该修复它。

**其他提示。

将您的元素（即“图片”）存储在变量中，而不是多次调用getElementbyId。每次执行此操作时，javaScript都会搜索整个DOM，这在大型应用程序中会占用大量资源，并且运行起来会很慢。只是我的宠儿。

Answer 2

首先将背景色保存在变量中：

z = document.getElementById("mydiv").style.backgroundColor;

然后将鼠标移出，恢复该颜色：

document.getElementById("mydiv").style.backgroundColor = z;

对我有用。我的完整代码是：

`   <script>
    var z;
    $( document ).ready(function() {
    document.getElementById("mydiv").onmouseover = function() {mouseOver()};
    document.getElementById("mydiv").onmouseout = function() {mouseOut()};
    });

    function mouseOver() {
      z = document.getElementById("mydiv").style.backgroundColor;
      document.getElementById("mydiv").style.backgroundImage = "url('londoneye.jpg')";
    }

    function mouseOut() {
      document.getElementById("mydiv").style.backgroundImage = "";
      document.getElementById("mydiv").style.backgroundColor = z;
    }
    </script>`

html是：

<div id="mydiv" style="width:400px; height:400px; background-color:yellow;margin-left:50px; margin-top:50px;">

将innerHTML改回其原始值，但使用JavaScript却“未定义”

2 个答案: