Javascript 我想在图像本身旁边显示图像的名称

我还有一个关于数组的基本javascript问题

我有一个简单的代码，每次加载页面时都会加载一个随机图像。问题是我想在图像本身旁边显示图像的名称。我似乎不知道该怎么做。这是我目前的代码：

//I. Array of pictures that will randomly appear

var plaatjes = new Array ( );
plaatjes[0] = "burger.png";
plaatjes[1] = "tomaat.png";
plaatjes[2] = "aardappel.png";
plaatjes[3] = "sla.png";

//II. function to generate number from 0 to n

function randomplaatje (n)
{
 return ( Math.floor ( Math.random ( )*0.9999999999999999* (n + 1)) );
}

//III. assign any random number from 0 to 2 to x.

x = randomplaatje(3);

//IV. display the image 

document.write('<img alt="randomplaatje" src="' + plaatjes[x] + '"/>');

//I.随机出现的图片数组
var plaatjes=新数组（）；
plaatjes[0]=“burger.png”；
plaatjes[1]=“tomat.png”；
plaatjes[2]=“aardappel.png”；
plaatjes[3]=“sla.png”；
//二,。函数生成从0到n的数字
函数随机性plaatje（n）
{
返回值（Math.floor（Math.random（）*0.9999999999999*（n+1））；
}
//三、 指定0到2到x之间的任意随机数。
x=随机的Plaatje（3）；
//四、 显示图像
文件。写（“”）；

是否也可以将alt标记添加到阵列内的图像？它们可以显示在文本框或其他地方的图像旁边

---

提前谢谢

一种解决方案是在数组中使用对象

    var plaatjes = [
      {src:"burger.png","name":"This is a burger"},
      {src:"tomaat.png","name":"This is a tomaat"},
      {src:"aardappel.png","name":"This is a aardappel"},
      {src:"sla.png","name":"This is a sla"}
];

function randomplaatje (n)
{
 return ( Math.floor ( Math.random ( )*0.9999999999999999* (n + 1)) );
}

//Assign any random number from 0 to 2 to x.
x = randomplaatje(3);


// The image source is plaatjes[x].src and the image name is plaatjes[x].name so creating an image with its name next to it could be done this way for instance :

document.write('<img src=' + plaatjes[x].src + '/>');
document.write(plaatjes[x].name);

var plaatjes=[
{src:“burger.png”，“name:“这是一个汉堡”}，
{src:“tomat.png”，“name”：“这是一个tomat”}，
{src:“aardappel.png”，“name:“这是一个aardappel”}，
{src:“sla.png”，“name:“这是一个sla”}
];
函数随机性plaatje（n）
{
返回值（Math.floor（Math.random（）*0.9999999999999*（n+1））；
}
//指定0到2到x之间的任意随机数。
x=随机的Plaatje（3）；
//图像源为plaatjes[x].src，图像名称为plaatjes[x].name，因此可以通过以下方式创建一个图像，图像旁边有其名称，例如：
文件。写（“”）；
document.write（plaatjes[x].name）；

您的数组不必只是一个字符串数组，它可以是一个包含文件名和alt文本的对象文本数组：

var plaatjes = new Array ( );
plaatjes[0] = {filename: "burger.png", altText: "this is a burger"};
plaatjes[1] = ...

然后你可以：

document.write('<img alt="' + plaatjes[x].altText+ '" src="' + plaatjes[x].filename + '"/>');

document.write（“”）；

但是megawac关于创建节点并附加它们的建议肯定比使用document.write要好。与使用document.write相比，它使您能够更好地控制DOM的构造方式。如果您使用像JQuery这样的库，则更容易操作。

一种方法是：

在页面中创建两个div：

<div id="image"></div>
<div id="caption"></div>

将分别用作显示图像及其标题的容器

然后，在javascript代码中，计算出要显示的图像的随机索引后，只需“填充”容器，例如：

document.getElementById("image").innerHTML = '<img alt="randomplaatje" src="' + plaatjes[x] + '"/>';
document.getElementById("caption").innerHTML = plaatjes[x];

document.getElementById（“图像”）.innerHTML=''；
document.getElementById（“caption”）.innerHTML=plaatjes[x]；

我尝试使用此代码，但它没有显示任何内容，我做错了什么？我需要设置空div吗？请参见上面Pierre的编辑。以与示例相同的方式将图像写入文档。