如何使 javascript randomizer 出现图像

Question

所以我正在尝试制作某种 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" >');
                            }
                        }

提前致谢

Answer 1

您可以只替换一个元素的 HTML 而不会覆盖您的文档。

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

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

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

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

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

您可以在此处查看更多示例和文档：https://www.w3schools.com/js/js_htmldom_html.asp。