CODEWITHSUNDEEP
javascriptimagerandom
Wesleydm1999
Wesleydm1999

Reputation: 3

how to make a javascript randomizer appear images

so im trying to make some sort of web application (random character picker) but i have no idea how to make an image appear without overwriting the entire website, any ideas for me? this is the javascript i already have

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" >');
                            }
                        }

thanks in advance

Upvotes: 0

Views: 43

Answers (1)

Joseph Beard
Joseph Beard

Reputation: 177

You can replace the HTML of just one element without overwriting your document.

In your HTML, you should create a container to hold the image you want to display:

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

Then, you can add an image to it using javascript:

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

getElementById finds the element with a certain id, and innerHTML replaces the HTML inside that element.

You can see more examples and documentation here: https://www.w3schools.com/js/js_htmldom_html.asp.

Upvotes: 1

Related Questions