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

Question

在提出问题之前，我想先讲一点背景故事，以便我们都在同一页面上。

因此，我在外部js文件中编写了一个包含200个项目的数组，如以下示例所示：

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

我之所以这样创建数组，是因为我将随机选择数组中的索引，并且该随机生成的数字将决定将在html页面上显示的信息，以便能够使用正确的信息对于每辆车，这是我在创建数组后所做的事情：

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;

---

现在，当我在做我的小项目的HTML部分时。

我在html文件上显示名称和年份没有问题，顺便说一下，这就是我在html页面上显示它们的方式：

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

现在，我的问题是：

由于我是在数组中随机选择一个索引，因此无法在URL中设置href。 因此，如何创建如下所示的超链接：“想了解更多信息？请点击此处！

当用户点击“点击此处！”时 它基本上会将用户带到www.ford.com，这将是数组中说明的网址。

编辑：

Answer 1

下面的代码可能会帮助您满足您的要求。

 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> 

编码愉快！