如何使用带有锚标记的数组中的随机选择的URL链接

Question

Before I ask my question I want to give a little bit of background story so we are all on the same page.

So I have an array of 200 items written in an external js file like in this example:

var theArray = [
    {"name": "ford", "year": "2004", "url": "www.ford.com"}, 
    {"name": "chevrolet", "year": "2006", "url": "www.chevrolet.com"} 
];

The reason I created my array like this is because I am going to be randomly choosing an index within the array, and that randomly generated number will dictate which information is going to be displayed on the html page, so to be able to use correct information for each car, this is what i did after creating the array:

var randomPick = Math.floor(Math.random() * theArray.length);
document.getElementbyId("carnameFord").innerHTML = theArray[randomPick].name; 
document.getElementbyId("caryearFord").innerHTML = theArray[randomPick].year;
document.getElementbyId("carurlFord").innerHTML = theArray[randomPick].url;

---

Now when I was working on the HTML portion of my little project.

I had no problem displaying the name and year on my html file, which by the way this is the how I displayed them on the html page:

<h2>Name: <font color="red"><span id="carnameFord"></span></font></h2>
<h2>Year: <font color="red"><span id="caryearFord"></span></font></h2>

NOW, MY QUESTION IS:

Because I am randomly choosing an index within the array, I can't have a set url to put in href. So, how can I create a hyperlink which would look like this: "Want to Learn More? CLICK HERE!

and when the user clicks on "CLICK HERE!" it basically takes the user to www.ford.com which would be the url being stated in the array.

Edit:

Answer 1

Possibly below code can help you with your requirement.

 var theArray = [ {"name": "ford", "year": "2004", "url": "www.ford.com"}, {"name": "chevrolet", "year": "2006", "url": "www.chevrolet.com"} ]; const labels = { learnMore: "Want to Learn More?", name: "Name", year: "Year", click: "CLICK HERE!" } const htmlArray = theArray.map((el, index) => { return ` <div> <h2>${labels.name}: <font color="red"><span>${el.name}</span></font></h2> <h2>${labels.year}: <font color="red"><span>${el.year}</span></font></h2> ${labels.learnMore} <a href="${el.url}" title="${el.name}">${labels.click}</a> </div> `; }) document.getElementById("container").innerHTML = htmlArray.join(''); 

 <div id="container"> </div> 

Happy Coding!