I am an absolute beginner with JS, looking to solve the following problem:
Context:
I have a JSON file with personal data like name, email address, bio, etc. For my project, I need to create a simple web page with all this personal data nicely presented per each individual (loading my data using $.getJSON()). I have to use JS, html and css combined to format the page.
Problem:
How do I add a mailto link to each email address on my page? It should open the correct email address for each individual, as per my JSON file. Here is my code so far:
var email = "<p>" + candidatesDataset.results[i].email+ "</p>";
var person =
'<section class="row" id="person"><div class="four columns card">' +
image + '</div><div class="eight columns card">'+
name +
about +
email +
"</div></section>";
The code above only shows the email address as text, while I need it to be clickable. Could someone please explain how to do this?
Do you mean :
var email = "<p><a href='mailto:"+ candidatesDataset.results[i].email+"'>" + candidatesDataset.results[i].email+ "</a></p>";
Use HTML mailto attribute as follows:
I am making using of ES6 template literals and Intepolation for better and easy syntax.
let email = `<p> <a href="mailto:${candidatesDataset.results[i].email}">Send Mail To ${candidatesDataset.results[i].email} </a> </p>`;
let person =
`<section class="row" id="person">
<div class="four columns card">
${image}
</div>
<div class="eight columns card">
${name}
${about}
${email}
</div>
</section>`;