时间戳

首页 > 解决方案 > 如何在网页上显示数组中的图像和文本？

javascript - 如何在网页上显示数组中的图像和文本？

问题描述

基本上，我有一个带有两个文本字段的简单网页，以及一个用于从计算机中选择图像的按钮。我需要做的是让用户选择一张照片，填写“艺术家”和“文本”字段，然后按“添加图像”按钮。这应该将所有三个项目添加到一个数组中，并在 div 中显示图像，并在“li”列表项中显示文本。

目前，图像有效，按下按钮时将显示在屏幕上，文本似乎被推入数组，但无论我做什么，我都无法让文本显示在网页上. 如果我将数组转换为对象，我也无法显示图像，这就是我将文本推送拆分为单独函数的原因。

无论哪种方式，无论我尝试什么，要么破坏图像显示，要么破坏文本显示。我无法让两者都显示在页面上。我正在努力做到这一点，所以每当添加新的图像和文本时，它都会像这样依次显示：

[专辑封面]

[文本]

[专辑封面]

[文本]

随着您不断添加更多内容，这将继续出现在屏幕上。有人可以告诉我我哪里出了问题。谢谢。

var info = {
    myImages: [],

    addImage: function(imageBlob) {
        this.myImages.push(imageBlob);
    },

    addInfo: function(artist, title) {
        this.myImages.push({
            artist: artist, 
            title: title
            });
    },


    redrawImages: function() {
        var divForImages = document.getElementById('myImages');
        divForImages.innerHTML = '';
        this.myImages.forEach((imageBlob) => {
            var img = document.createElement('img');
            img.style.width = "200px";
            img.style.height = "200px";
            img.src = URL.createObjectURL(imageBlob);
            divForImages.appendChild(img);
        });

    },

    redrawInfo: function() {
        var ul = document.querySelector('ul');
        this.myImages.forEach(function (item) {
            let li = document.createElement('li');
            ul.appendChild(li);
            li.innerHTML += item;
        });
    }


}

var handlers = {
    addImageAndRedraw: function() {
        var fileInput = document.getElementById('fileInput');
        var artistField = document.getElementById('artistField');
        var titleField = document.getElementById('titleField');

        if (fileInput.files.length === 1) {
            info.addImage(fileInput.files[0]);
            info.addInfo(artistField.value, titleField.value);
            info.redrawImages();
            info.redrawInfo();
        }
    }
}

var button = document.getElementById('button');
button.addEventListener('click', handlers.addImageAndRedraw);
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>My images</h1>
    <input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
    <input id="button" type="button" value="Add image and redraw">

    <div>
        <input id="artistField" type="text" placeholder="artist">
        <input id="titleField" type="text" placeholder="title">
    </div>

    <hr>
    <div id="myImages">
    </div>


    <ul></ul>

    <script src="album.js"></script>
  </body>
</html>

标签： javascripthtmlarrays

解决方案

您将信息添加到与图像相同的数组中，因此它最终会像 [image, info, image, info] 等。您最好添加一个包含图像和信息的对象，并且然后在将内容添加到页面时将其视为单个对象，而不是在单独的函数中添加图像和文本。此外，您没有清除信息列表，因此它会成倍增长。

这是一个修改后的示例，就在调整了我上面提到的位之后......

var info = {
myInfo: [],

add: function(imageBlob, artist, title) {
    this.myInfo.push({
        image: imageBlob,
        artist: artist,
        title: title
    });
},

redraw: function() {
    var divForImages = document.getElementById('myImages');

    divForImages.innerHTML = '';

    var ul = document.querySelector('ul');
    ul.innerHTML = "";

    this.myInfo.forEach((info) => {
        var img = document.createElement('img');
        img.style.width = "200px";
        img.style.height = "200px";
        img.src = URL.createObjectURL(info.image);
        divForImages.appendChild(img);

        let li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML = info.artist + " - " + info.title;
    });

},
}

var handlers = {
addImageAndRedraw: function() {
    var fileInput = document.getElementById('fileInput');
    var artistField = document.getElementById('artistField');
    var titleField = document.getElementById('titleField');

    if (fileInput.files.length === 1) {
        info.add(fileInput.files[0], artistField.value, titleField.value);
        info.redraw();
    }
}
}

var button = document.getElementById('button');
button.addEventListener('click', handlers.addImageAndRedraw);
<h1>My images</h1>

<input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
<input id="button" type="button" value="Add image and redraw">

<div>
<input id="artistField" type="text" placeholder="artist">
<input id="titleField" type="text" placeholder="title">
</div>

<hr>

<div id="myImages"></div>

<ul></ul>

推荐阅读