时间戳

首页 > 解决方案 > 将 innerHTML 改回其原始值，但使用 JavaScript 获得“未定义”

javascript - 将 innerHTML 改回其原始值，但使用 JavaScript 获得“未定义”

问题描述

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;

正在返回“未定义”，这意味着我在存储变量时以某种方式搞砸了，对吗？我也尝试过 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。你不必为我做作业。但是，正确方向的提示会很好。

本地环境截图

标签： javascripthtml

解决方案

似乎这可能会发生，因为您的 html 中的脚本标记位于正文上方。

当您在脚本开头声明“原始文本”变量时，页面尚未加载，因此它返回未定义，因为它在文档中找不到任何具有“图像”类的内容。

有时它可能加载得足够快，有时它没有

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

**额外提示。

将您的元素（即：“图像”）存储在变量中，而不是多次调用 getElementbyId。每次执行此操作时，javascript 都会搜索整个 DOM，这在较大的应用程序中是资源密集型的，并且会变得非常慢。只是我的一个小烦恼。

推荐阅读