How can I assign a value to the elements in my array?-CodePudding

I'm designing a simple image-guessing game where the user is shown an image of a flag and then must guess the name of the flag. I have the images set to show up randomly using a random number generator in javascript, however, I do not know how to assign a name to each flag so that I can compare it with the user input.

Here is my code. How would I go about adding value to my images so I can compare them with the user input?

index.html:

<script language="javascript">
                    document.write("<div id = flagImage><img src = "   link[random_num]   " alt = Flag width = 250px></div>");
                </script>


main.js:

random_num = (Math.round((Math.random() * 10)   1));
link = new Array;

link[1] = "../assets/flagImages/ad.png";
link[2] = "../assets/flagImages/ae.png";
link[3] = "../assets/flagImages/af.png";
link[4] = "../assets/flagImages/ag.png";
link[5] = "../assets/flagImages/ai.png";
link[6] = "../assets/flagImages/al.png";
link[7] = "../assets/flagImages/am.png";
link[8] = "../assets/flagImages/ao.png";
link[9] = "../assets/flagImages/aq.png";
link[10] = "../assets/flagImages/ar.png";`

CodePudding user response：

You could try to set and array of object, and get the link of the image of each country, and then, a string to set the name of the country.

You can also get the link of each country, like this:

let objectName = {name:"NameCountry", link:"https..."}

console.log(objectName.name)  //it'll return "NameCountry"
console.log(objectName.link)  //it'll return "https..."

CodePudding user response：

Use objects to associate data elements:

const countries = [{ 
    name: 'United Kingdom', 
    flagImagePath: '../assets/flagImages/uk.png'
}, { 
    name: 'United States', 
    flagImagePath: '../assets/flagImages/us.png'
}]