Question

这是我第一次发帖，所以如果我做错了什么请慷慨，谢谢你的帮助！

我觉得我已经阅读了所有的教程和问题，但似乎仍然无法让这个数组充满图像。

我明白了！感谢那些帮助过你的人。

    var titleOptions = ["<image src='images/spelling/cat.png' class='cardimg'>", "<image src='images/spelling/bee.png' class='cardimg'>", "<image src='images/spelling/dog.png' class='cardimg'>", "<image src='images/spelling/house.png' class='cardimg'>", "<image src='images/spelling/car.png' class='cardimg'>"];
        
    var descriptionOptions = ["cat", "bee", "dog", "house", "car"];


    function firstCard() {
        var title = document.getElementById("title");
        var description = document.getElementById("description");
        document.getElementById("title").innerHTML = titleOptions[0];
        document.getElementById("description").innerHTML = descriptionOptions[0];
        description.style.display = "none";
        if(title.style.display == "none") {
                title.style.display = "block";
          }
        if (titleOptions <= 0) {
        document.getElementById("completed").style.visibility = "visible";
        document.getElementById("title").style.visibility = "hidden";
        }
        else {
        document.getElementById("completed").style.visibility = "hidden";
        document.getElementById("title").style.visibility = "visible";
        }
    }
        
    function showFront() {
        var title = document.getElementById("title");
        var description = document.getElementById("description");
        description.style.display = "none";
        if(title.style.display == "none") {
                title.style.display = "block";
          }
        else {
            title.style.display = "block";
        }
    }

    function showBack() {
        var title = document.getElementById("title");
        var description = document.getElementById("description");
        title.style.display = "none";
        if(description.style.display == "none") {
                description.style.display = "block";
          }
        else {
            description.style.display = "block";
        }
        if (descriptionOptions <= 0) {
        document.getElementById("completed").style.visibility = "visible";
        document.getElementById("description").style.visibility = "hidden";
        }
        else {
        document.getElementById("completed").style.visibility = "hidden";
        document.getElementById("description").style.visibility = "visible";
        }
    }

    function changeTitle() {
        titleOptions.shift();
        descriptionOptions.shift();
        var title = document.getElementById("title");
        var description = document.getElementById("description");
        document.getElementById("title").innerHTML = titleOptions[0];
        document.getElementById("description").innerHTML = descriptionOptions[0];
        description.style.display = "none";
        if(title.style.display == "none") {
                title.style.display = "block";
          }
        if (titleOptions <= 0) {
        document.getElementById("completed").style.visibility = "visible";
        document.getElementById("title").style.visibility = "hidden";
        }
        else {
        document.getElementById("completed").style.visibility = "hidden";
        document.getElementById("title").style.visibility = "visible";
        }
    }

<!DOCTYPE html>

<html>
    
<head>
    <meta charset="utf-8">
    
    <title>Mrs. Katie's Grade One Online Classroom - Spelling</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="js/functions.js"></script>
    
</head>
    
<body onload="firstCard()">
    
    <header>
        <div id="headerwrapper">
            <img src="images/mrskatie.png" alt="Mrs. Katie" id="mrskatie">
            <h1>Mrs. Katie's</h1>
            <h2>Grade One Online Classroom</h2>
        </div>
    </header>
    
    <div id="bodywrapper">
        <nav>
            <div class="rectangle">   
                <ul id="navigation">
                  
                  <li><a href="spelling.html" class="currentpage">Spelling</a></li>
                 
                </ul>
            </div>
            <div id="trianglecontainer">
                <div class="left-triangle-top"></div>
                <div class="left-triangle-bottom"></div>
                <div class="right-triangle-top"></div>
                <div class="right-triangle-bottom"></div>
            </div>
        </nav>
        <div id="card">
            <div id="buttonwrapper">
                <button onclick="showFront();">Front</button>
                <button onclick="showBack();">Back</button>
                <button onclick="changeTitle()" id="nextcard">Next</button>
            </div>
            <div id="textwrapper">
                <div id="title" style="display:block;"></div>
                <div id="description" style="display:none;"></div>
                <div id="completed"><img src="images/popupteacher.png" alt="You completed the cards! Great job." id="popupteacher">
                <a href="index.html" id="startover">Start Over</a><a href="#" id="nextsubject">Next Subject</a></div>
            </div>
        </div>
    </div>
</body>
    
</html>

Answer 1

您的问题是您正在尝试使用Dom Html元素设置innerHTML。

document.getElementById("title").innerHTML = titleOptions[0];

那不行。你需要追加它。

var title = document.getElementById("title");
title.innerHTML = "";  //remove other elements
title.appendChild(titleOptions[0]);  //add the image

Answer 2

我明白了！感谢那些帮助过你的人。这就是我所需要的一切。

＆＃13;

<script>
   
    var titleOptions = ["<image src='images/spelling/cat.png' class='cardimg'>", "<image src='images/spelling/bee.png' class='cardimg'>", "<image src='images/spelling/dog.png' class='cardimg'>", "<image src='images/spelling/house.png' class='cardimg'>", "<image src='images/spelling/car.png' class='cardimg'>"];
        
    var descriptionOptions = ["cat", "bee", "dog", "house", "car"];
    
    </script>

＆＃13;

如何用图像填充数组？

2 个答案: