Random image javascript

I am struggling a bit with this random image javascript even though I sense the answer is quite simple. My code generates four letters (images) at a time. How do I get the code to regenerate new letters instead of adding four additional letters (images)?

Here is a Jsfiddle also.

  <script>
function getRandomImage() {
//declare an array to store the images
var randomImage = new Array();

//insert the URL of images in array
randomImage[0] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/a.png";
randomImage[1] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/b.png";
randomImage[2] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/c.png";
randomImage[3] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/d.png";
randomImage[4] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/e.png";
randomImage[5] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/f.png";
randomImage[6] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/g.png";
randomImage[7] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/h.png";
randomImage[8] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/i.png";
randomImage[9] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/j.png";
randomImage[10] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/k.png";
randomImage[11] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/l.png";
randomImage[12] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/m.png";
randomImage[13] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/n.png";
randomImage[14] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/o.png";
randomImage[15] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/p.png";
randomImage[16] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/q.png";
randomImage[17] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/r.png";
randomImage[18] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/s.png";
randomImage[19] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/t.png";
randomImage[20] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/u.png";
randomImage[21] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/v.png";
randomImage[22] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/w.png";
randomImage[23] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/x.png";
randomImage[24] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/y.png";
randomImage[25] = "http://www.englishclass.dk/_themes/englishclass/img/scrabble/z.png";
//loop to display five randomly chosen images at once
for (let i=0; i< 4; i++) {
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*randomImage.length);
//print the images generated by a random number
document.getElementById("result").innerHTML += '<img src="'+ randomImage[number] +'" style="height:150px";/>';
}
}

</script>
<body>
<h1> GENERATE YOUR LETTERS... </h1>
<!-- call user-defined getRandomImage function to generate image -->  
<center><button onclick = "getRandomImage()" class="btn btn-white btn-        animate">Let's Go!</button></center>
<br> <br>
<span id="result" align="center"> </span>

Solution

You can add document.getElementById('result').innerHTML = "" before your for loop to clear the result div before adding 4 new items.

You can also reduce your code a lot by using a for loop to generate the image URLs.

var letters = 'abcdefghijklmnopqrstuvwxyz'.split('');

for (let i = 0; i < letters.length; i++) {
    randomImage.push(`http://www.englishclass.dk/_themes/englishclass/img/scrabble/${letters[i]}.png`)
}