I have 5 html files with very similar content: it's a cv builder website and I am making 5 different cv templates. What I was trying to do is to create a javacript class which will instance 5 different objects from the class with different values.
But when I link the same js file with all the 5 html pages, an error occurs and the innerHTML cannot be read. Here is a piece of the code:
let resume1Div = document.querySelector(".resume-web-development");
let resume2Div = document.querySelector(".resume-data-science");
class resumeHtml {
constructor(_title, _jobPosition, _summary, _image, _email, _phone, _address, _twitter) {
this.title = _title;
this.jobPosition = _jobPosition;
this.summary = _summary;
this.image = _image;
this.email = _email;
this.phone = _phone;
this.address = _address;
this.twitter = _twitter;
}
}
let resume1 = new resumeHtml("Elon Musk", "Enterpreneur, Engineer, Inventor and Investor", "Aiming to reduce global warming through sustainable energy production and consumption. Planning to reduce the risk of human extinction by making life multi-planetary and setting up a human colony on Mars.", "assets/images/musk.jpg", "elon@teslamotors.com", "620-681-5000", "Los Angeles, USA", "@elonmusk");
let resume2 = new resumeHtml("John Doe", "Data Scientist", "Highly accurate and experienced Data Scientist adept at collecting, analyzing and interpreting large datasets, developing new forecasting models, and performing data management tasks.", "assets/images/john.jpg", "john@gmail.com", "6782092", "Ontario, Canada", "@johnDoe");
let resume1Arr = [resume1];
let resume2Arr = [resume2];
resume1Arr.forEach(el => {
resume1Div.innerHTML +=
`<div class="resume-title col-md-10"><span></span><h2>${el.title}</h2></div><div class="col-md-5 resume-description"><h4 class="resume-job-position">${el.jobPosition}</h4><p class="resume-summary">${el.summary}</p></div><div class="col-md-2 resume-img"><img src=${el.image} class="img-circle"></div><div class="col-md-3 col-md-offset-2 resume-contact-details"><span>${el.email}</span><i class="fa fa-envelope" aria-hidden="true"></i><br><span>${el.phone}</span><i class="fa fa-mobile" aria-hidden="true"></i><br><span>${el.address}</span><i class="fa fa-map-marker" aria-hidden="true"></i><br><span>${el.twitter}</span><i class="fa fa-twitter" aria-hidden="true"></i></div>
`
});
resume2Arr.forEach(el => {
resume2Div.innerHTML +=
`
<div class="resume-title col-md-10"><span></span><h2>${el.title}</h2></div><div class="col-md-5 resume-description"><h4 class="resume-job-position">${el.jobPosition}</h4><p class="resume-summary">${el.summary}</p></div><div class="col-md-2 resume-img"><img src=${el.image} class="img-circle"></div><div class="col-md-3 col-md-offset-2 resume-contact-details"><span>${el.email}</span><i class="fa fa-envelope" aria-hidden="true"></i><br><span>${el.phone}</span><i class="fa fa-mobile" aria-hidden="true"></i><br><span>${el.address}</span><i class="fa fa-map-marker" aria-hidden="true"></i><br><span>${el.twitter}</span><i class="fa fa-twitter" aria-hidden="true"></i></div>
`
});Resume1Div is the div in one html file, Resume2Div is the div in the another html file.
How can I use the same js file for all the html files just by changing the values, without making 5 separate js files with the same code?