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。

如何使javascript随机发生器出现图像

1 个答案: