How to make a simple recognizing game using may symbols

Question

Hi I am new to this and still learning haha so go easy on me.

I am trying to make a simple recognizing game using map symbols as the images. I have got the start button when clicked will ask you a question but cannot seem to get a random picture to appear as well. I also what the grey stars to light up every time the user selects the right button/symbol. Here is the code:

<!DOCTYPE html>
    <style> 
        body{ background-color: lightblue; }
    </style>
    <html>
        <head>
            <title>OS Map Symbols</title>
            <meta charset="utf-8" />
        </head>
        <body>
        <p> <input onclick="btnStart(); displayRandomImage();" type="button" value="Start" /> </p> 

        <input id="btnTrain" type="button" value="Train Station" disabled="disabled"/>
        <input id="btnBus" type="button" value="Bus Station" disabled="disabled"/>
        <input id="btnYouth" type="button" value="Youth Hostel" disabled="disabled"/>
        <input id="btnFootpath" type="button" value="FootPath" disabled="disabled"/>
        <input id="btnBridle" type="button" value="Bridleway" disabled="disabled"/>
        <input id="btnWorship" type="button" value="Place of Worship" disabled="disabled"/>
        <input id="btnHouse" type="button" value="Public House" disabled="disabled"/>
        <input id="btnCar" type="button" value="Car Park" disabled="disabled"/>
        <input id="btnRoad" type="button" value="Road" disabled="disabled"/>
        <input id="btnPillar" type="button" value="Triangulation Pillar" disabled="disabled"/>

        <center> <p> <p id="paragrapgh"> </p> </center> 
        <center> <div class="contents" id="content"></div> </center>

        <img id="imgTrain.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgBus.jpg"  img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgYouth.jpg"  img src="C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgFootpath.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgBridle.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgWorship.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg" width="100" height="100" style="display:none;"/>
        <img id="imgHouse.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg" width="100" height="100"  style="display:none;"/>
        <img id="imgCar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg" width="100" height="100"  style="display:none;"/>
        <img id="imgRoad.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg" width="100" height="100"  style="display:none;"/>
        <img id="imgPillar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg" width="100" height="100"  style="display:none;"/>

        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar1" />
        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar2" />
        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar3" />
        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar4" />
        <img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar5" />
        </body>     
    </html>
<script> 
    function btnStart() {
        var x = document.getElementById("paragrapgh");
        x.style.fontSize = "25px";
        x.style.color = "red";
        document.getElementById("paragrapgh").innerHTML = "What Is This Symbol?";
    }
    function displayRandomImage(){
        var Images1 = new Array();
        Images1[0]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg"
        Images1[1]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg"
        Images1[2]= "C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg"
        Images1[3]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg"
        Images1[4]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg"
        Images1[5]= "C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg" 
        Images1[6]= "C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg"
        Images1[7]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg" 
        Images1[8]= "C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg"
        Images1[9]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg"

        var random = Images1[Math.floor(Math.random() * Images1.length)];
        document.getElementById("content").innerHTML = random;
    }
</script>

score 0 · Answer 1 · edited May 23 '17 at 12:08

You were very close. The issue you're encountering can be solved using the addEventListener method of connecting events to elements. In this case, adding an id to your start button and firing the events when clicked would look like this

JSFIDDLE

HTML

<input id="startButton" type="button" value="Start" />

JS

var startButton = document.getElementById('startButton');
startButton.addEventListener('click', function(){
    btnStart();
    displayRandomImage();
});

It's worth mentioning you have a number of HTML syntax issues including unclosed tags, style and script tags outside of the html element, using . in id attributes, and using deprecated tags like center.

Unfortunately, because you have locally linked images, im not sure if you're asking how to make the gif items animate again (Can you control GIF animation with Javascript?) or if you're asking about swapping image src using js (Programmatically change the src of an img tag)

From a coding perspective, the way you're going about trying to link up images to the buttons could be made far simpler for yourself by starting with a JS object, and generating items from there, especially as you have a consistent path to images. Something like this: JSFIDDLE

How to make a simple recognizing game using may symbols

1 Answers1