CODEWITHSUNDEEP
javascripthtmlimagerandomgenerate
micks88
micks88

Reputation: 57

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>

Upvotes: 0

Views: 848

Answers (5)

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

You can also get a random letter without splitting a string by using the method given in the top voted answer here. You can then simplify your code as the others have mentioned above to only a few lines.

I've commented the code below.

// Function triggered with onclick event
function getRandomImage() {

  // Clear the previous letters
  document.getElementById("result").innerHTML = "";

  // Loop
  for (let i = 0; i < 4; i++) {

    // Generate random letter
    letter = String.fromCharCode(97 + Math.floor(Math.random() * 26))

    // Add image to #result
    document.getElementById("result").innerHTML += '<img src="http://www.englishclass.dk/_themes/englishclass/img/scrabble/' + letter + '.png" style="height:150px";/>';

  }

}
  <h1> GENERATE YOUR LETTERS... </h1>
  <center>
    <button onclick="getRandomImage()" class class="btn btn-white btn-animate">
      Let's Go!
    </button>
  </center>
  <br>
  <br>
 <span id="result" align="center"> </span>

Upvotes: 0

soimon
soimon

Reputation: 2580

As explained in "innerHTML += ..." vs "appendChild(txtNode)" appending new elements by doing innerHTML += '<img />' causes the browser to rebuild the entire container. This may cause performance issues depending on where, when and how often you call it. For the sake of completeness I'm providing the more performant example (a bit more verbose but in general better practice).

This should replace your for loop:

// Clear all childs from the container

const container = document.getElementById("result");
container.childNodes.forEach((child) => child.remove());

for (let i = 0; i < 4; i++) {
  const number = Math.floor(Math.random() * randomImage.length);

  // Create a new <img /> element and append it to the container

  const image = document.createElement("img");
  image.src = randomImage[number];
  image.style.height = "150px";
  container.append(image);
}

Upvotes: 0

Akash Sahani
Akash Sahani

Reputation: 21

Add following code at starting of the function definition :

document.getElementById("result").innerHTML = "";

Like this

<script>
function getRandomImage() {

document.getElementById("result").innerHTML = "";

//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>

Upvotes: 0

abhinavsinghvirsen
abhinavsinghvirsen

Reputation: 2014

document.getElementById('result').innerHTML = " " before for loop

    <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
document.getElementById("result").innerHTML="";
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>

Upvotes: 1

Andrew Halpern
Andrew Halpern

Reputation: 514

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`)
}

Upvotes: 4

Related Questions