JavaScript Display Image and Text Rather than Alert Message
<p>I'm a newbie and starting to learn coding. I have a question regarding the famous "How many fingers am I holding up?" project. So instead of an alert message, I want the actual image of a finger with 1-5 and the message of either it is correct or not.</p>

<p>I think there are jquery codes.. but i don't want to jump to jquery and learn hardcore javascript first. I'm stuck with creating image Arrays and cannot manage to make the image come up.</p>

<p>Here's the code I have:</p>

<pre><code>    &lt;body&gt;

    &lt;p&gt;How many fingers am I holding up?&lt;/p&gt;

    &lt;p&gt;&lt;input type="text" id="guess"&gt; &lt;button id="checkGuess"&gt;Guess!&lt;/button&gt;&lt;/p&gt;

    &lt;div id="image"&gt;&lt;/div&gt;

    &lt;div id="text"&gt;&lt;/div&gt;

    &lt;script type="text/javascript"&gt;

        var imgArray = new Array();

        imgArray[1] = new Image();
            imgArray[1].src="images/1.png";

        imgArray[2] = new Image();
            imgArray[2].src="images/2.png";

        imgArray[3] = new Image();
            imgArray[3].src="images/3.png";

        imgArray[4] = new Image();
            imgArray[4].src="images/4.png";

        imgArray[5] = new Image();
            imgArray[5].src="images/5.png";


        document.getElementById("checkGuess").onclick = function() {

            var randomNumber = Math.random();

            randomNumber = randomNumber * 6;

            randomNumber = Math.floor(randomNumber);

            if (document.getElementById("guess").value == randomNumber) {

                doument.getElementById("image").innerHTML = imgArray[num] + alert("Well done! You got it!");

            } else {

                alert("Nope! The number was " + randomNumber);

            }

        }


    &lt;/script&gt;



&lt;/body&gt;
</code></pre>

<p></p>

<p>Thanks Guys! Appreciate your help!</p>

<p>Cheers!
Char</p>