0

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:

taho
  • 67
  • 1
  • 1
  • 6
  • where is you `carurlFord` in the HTML ? have you missed to add it ? – Nikhil Kinkar Dec 13 '18 at 19:55
  • Possible duplicate of [How to change href attribute using JavaScript after opening the link in a new window?](https://stackoverflow.com/questions/15385207/how-to-change-href-attribute-using-javascript-after-opening-the-link-in-a-new-wi) – schu34 Dec 13 '18 at 19:55
  • While this is a duplicate and you can get your answer there, I would strongly advise against using innerHTML https://stackoverflow.com/questions/16860287/security-comparison-of-eval-and-innerhtml-for-clientside-javascript – Matthew Dec 13 '18 at 19:59
  • 1
    Possible duplicate of [How can I add "href" attribute to a link dynamically using JavaScript?](https://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript) – Matthew Dec 13 '18 at 20:00

1 Answers1

0

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!

Gaurav Mall
  • 500
  • 4
  • 16
  • How can I edit the "htmlArray" so that it only returns once instead of repeating? – taho Dec 15 '18 at 06:43
  • Hi Taho....the htmlArray is nothing but a translation for the data to represent on the html. So, for doing that, Since you have a array we have to map the array to the html translation through map accordingly. However you can create an html template with some parameters like

    !xa!xb

    !xc: !xd... and replace the parameter by !xa, !xb, !xc etc by traversing through your data array.

     – Gaurav Mall Dec 18 '18 at 02:46