Javascript 显示随机选择的项目

我有5个盒子和一系列物品。如何在5个框中显示5个项目，随机选择，不重复

这是一个问题：

ptags[index]。textContent=item[0]。标签

它没有显示在框中吗

我尝试了很多方法都没有成功。我使用DreamWeaver作为IDE，这可能有问题吗


var array2=[]；
可变项目=[{
标签：“1”，
url:'1.png'
},
{
标签：‘2’，
url:'2.png'
},
{
标签:"3",，
url:'3.png'
},
{
标签：‘4’，
url:'4.png'
},
{
标签：‘5’，
url:'5.png'
},
{
标签：‘6’，
url:'6.png'
},
{
标签：‘7’，
url:'7.png'
},
{
标签:"8",，
url:'8.png'
},
{
标签:"9",，
url:'9.png'
},
{
标签:"10",，
url:'10.png'
},
{
标签:"11",，
url:'11.png'
},
{
标签：‘12’，
url:'12.png'
}
];
array2=items.slice（）；
控制台日志（array2）；
右值（）；
var项目；
函数rvalue（）{
ptags=document.querySelectorAll（'[name=“values”]'）；
控制台日志（ptags）；
对于（var指数=0；指数<5；指数++）{
var randomIndex=Math.floor（Math.random（）*array2.length）；
项目=阵列2.拼接（随机索引，1）；
控制台日志（项目）；
ptags[index].textContent=item[0]。标签；
ptags[index].dataset.itemIndex=randomIndex；
}
}
控制台日志（array2）
正文{
溢出：隐藏；
背景尺寸：100vw 100vh；
}
#容器{
空白：nowrap；
文本对齐：居中；
边框：px实心#CC0000；
保证金：2倍；
右边距：2px；
}
.盒子{
宽度：计算（15.4%-4px）；
高度：15vh；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
边界半径：5px；
边框：2倍实心#333；
边框：#000边框颜色：#E600；
保证金：-2px；
背景色：#0F6；
}
.方框p{
字体大小：calc（2vw+10px）；
}
p{
字体：“Courier New”，Courier，monospace；
字体大小：30px；
颜色：#005ce6；
文本对齐：居中；
}
.文本{
填充：20px；
利润率：7像素；
边缘顶部：10px；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
}






您有一个正确的代码，只需将代码放入就绪函数中，或将其移动到HTML标记后的正文末尾，以确保在脚本运行之前加载DOM即可

为此，我建议使用
DOMContentLoaded
事件提供几种解决方案：

document.addEventListener("DOMContentLoaded", function() {
    //Your code here 
});

注意：要在下次自己检测此类错误，您可以先检查结果的长度，如下所示：

console.log( document.querySelectorAll('[name="values"]').length );

如果长度为零，并且有正确的选择器，则需要检查DOM可用性



无标题文件
身体{
溢出：隐藏；
}
.标题{
左缘：20%；
保证金权利：20%；
利润上限：-2%；
}
.盒子{
宽度：计算（15.4%-4px）；
显示：内联块；
边界半径：5px；
边框：2倍实心#333；
边框：#000边框颜色：#E600；
保证金：-2px；
背景色：#0F6；
}
.盒子{
高度：15vh；
显示：内联flex；
对齐项目：居中；
调整内容：中心
}
#容器{
空白：nowrap；
文本对齐：居中；
边框：px实心#CC0000；
保证金：2倍；
右边距：2px；
}
.方框p{
字体大小：calc（2vw+10px）；
}
p{
字体：“Courier New”，Courier，monospace；
字体大小：30px；
颜色：#005ce6；
文本对齐：居中；
}
.文本{
填充：20px；
利润率：7像素；
边缘顶部：10px；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
}
身体{
背景尺寸：100vw 100vh；
}
document.addEventListener（“DOMContentLoaded”，function（））{
var array2=[]；
可变项目=[{
标签：“1”，
url:'1.png'
},
{
标签：‘2’，
url:'2.png'
},
{
标签:"3",，
url:'3.png'
},
{
标签：‘4’，
url:'4.png'
},
{
标签：‘5’，
url:'5.png'
},
{
标签：‘6’，
url:'6.png'
},
{
标签：‘7’，
url:'7.png'
},
{
标签:"8",，
url:'8.png'
},
{
标签:"9",，
url:'9.png'
},
{
标签:"10",，
url:'10.png'
},
{
标签:"11",，
url:'11.png'
},
{
标签：‘12’，
url:'12.png'
}
];
array2=items.slice（）；
右值（）；
var项目；
函数rvalue（）{
ptags=document.querySelectorAll（'[name=“values”]'）；
对于（var指数=0；指数<5；指数++）{
var randomIndex=Math.floor（Math.random（）*array2.length）；
项目=阵列2.拼接（随机索引，1）；
ptags[index].textContent=item[0]。标签；
ptags[index].dataset.itemIndex=randomIndex；
}
}
});





当脚本在元素出现之前运行时，会出现此错误。您需要交换容器和脚本标记的位置，如下所述：



无标题文件
身体{
溢出：隐藏；
}
.标题{
左缘：20%；
保证金权利：20%；
利润上限：-2%；
}
.盒子{
宽度：计算（15.4%-4px）；
显示：内联块；
边界半径：5px；
边框：2倍实心#333；
边框：#000边框颜色：#E600；
保证金：-2px；
背景色：#0F