如何使javascript随机化器显示图像

因此，我试图制作某种web应用程序随机字符选择器 但我不知道如何在不覆盖整个网站的情况下使图像出现，有什么想法吗？这是我已经拥有的javascript

function RandomCustoms() {
                            canvasRuimte = document.getElementById('canvas').getContext('2d');
                            canvasRuimte.clearRect(0,0,600,300);
                            canvasRuimte.font = 'italic 30px sans-serif';
                            canvasRuimte.fillStyle = "BLACK";
                            worp1 = Math.floor(24*Math.random())+1;
                            tekenAfbeelding(worp1);
                            worp2 = Math.floor(24*Math.random())+1;
                            tekenAfbeelding(worp2);
                            worp3 = Math.floor(24*Math.random())+1;
                            tekenAfbeelding(worp3);
                            worp4 = Math.floor(24*Math.random())+1;
                            tekenAfbeelding(worp4);
                            worp5 = Math.floor(24*Math.random())+1;
                            tekenAfbeelding(worp5);
                            function tekenAfbeelding(worp1){
                                document.write('<img id="image"src="Paladins-champions/'+worp1+'.png" >');
                            }
                            function tekenAfbeelding(worp2){
                                document.write('<img id="image"src="Paladins-champions/'+worp2+'.png" >');
                            }
                            function tekenAfbeelding(worp3){
                                document.write('<img id="image"src="Paladins-champions/'+worp3+'.png" >');
                            }
                            function tekenAfbeelding(worp4){
                                document.write('<img id="image"src="Paladins-champions/'+worp4+'.png" >');
                            }
                            function tekenAfbeelding(worp5){
                                document.write('<img id="image"src="Paladins-champions/'+worp5+'.png" >');
                            }
                        }

---

提前感谢

您可以只替换一个元素的HTML，而无需覆盖文档

在HTML中，您应该创建一个容器来保存要显示的图像：

<div id="imgContainer"></div>

然后，您可以使用javascript向其中添加图像：

document.getElementById('imgContainer').innerHTML = '<img id="image"src="Paladins-champions/'+worp1+'.png" >';

getElementById查找具有特定id的元素，innerHTML替换该元素中的HTML

---

您可以在此处看到更多示例和文档：。

使用document.write会导致此问题。不要用它。查看DOM操作的其余部分。像构造函数和hm之类的东西，这样我就可以摆脱所有其他函数编码了？现在我有了下一个问题，图片相互覆盖，我必须把它们放在不同的div中吗？你可以尝试appendChild，这是文档。您还可以包括jQuery库并使用其append方法。jQuery会使页面加载时间稍微长一点，但会使编写代码更容易。