多個 HTML 文件只鏈接到一個 JS 文件

Question

我有 5 個內容非常相似的 html 文件：這是一個簡歷生成器網站，我正在制作 5 個不同的簡歷模板。 我試圖做的是創建一個 javacript 類，該類將從具有不同值的類中實例化 5 個不同的對象。

但是當我將同一個 js 文件與所有 5 個 html 頁面鏈接時，發生錯誤並且無法讀取 innerHTML。 這是一段代碼：

 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 是一個 html 文件中的 div， Resume2Div 是另一個 html 文件中的 div。

如何僅通過更改值對所有 html 文件使用相同的 js 文件，而無需使用相同的代碼制作 5 個單獨的 js 文件？

Answer 1

我假設在您的五個頁面中的某些頁面上，您獲得了類resume-web-development的 div，而其他頁面上的 div 是類resume-data-science 。

這導致在每種情況下一個變量引用一個 DOM 元素，一個變量為空。

由於您的代碼基本上結構良好，您只需檢查它是否為空，如下所示：

if (resume1Div) resume1Arr.forEach(el => {
    resume1Div.innerHTML += ...
}
if (resume2Div) resume2Arr.forEach(el => {
    resume2Div.innerHTML += ...
}

那應該已經可以解決問題了。 然后，您可以使用以下內容優化代碼：

function fillDiv(div, el){
   div.innerContent+= ...
}
let resumeDiv = resume1Div || resume2Div;
fillDiv(resumeDiv, resumeDiv === resume1Div ? resume1 : resume2);

可能還有待改進。