如何为许多 HTML 文件调用一个 JavaScript 文件？

Question

我正在尝试制作具有多个页面的网站。
在getYarismaciName function 中，我试图获取卡片（在第一个 HTML 页面中）innerHTML 并发送getJSON function。 在这个 function 中，我正在尝试使用 innerHTML 在.yarismaci-section （在第二页）中添加一些 HTML 代码，但在这一部分中我得到“未捕获的 TypeError：无法设置属性 'innerHTML' of null”错误我猜 js 仍在搜索yarismaci-section -第一个yarismaci-section页中的部分，但它位于第二页中。 我该如何解决这个错误？

const cards = document.querySelectorAll(".card");

const getYarismaciName = function(){
cards.forEach((item) => {
    item.addEventListener("click",function(){
        let name=item.childNodes[3].innerHTML;
                
        getJSON(name);

    })
});
}
getYarismaciName();


const getJSON = function(name){
    const xhr = new XMLHttpRequest();
    xhr.open("GET","data.json",true);

    xhr.onload=function(){
        if(this.status===200){
            let yarismacilar = JSON.parse(this.responseText);
            let html="";
            yarismacilar.forEach(person => { 
                if(person.name===name){
                    html=`
                            <div class="yarismaci-img" id="yarismaci__img">
                            <img src="${person.image}" alt="${person.name}">
                            </div>
                            <div class="yarismaci-des">
                            <h3 id="yarismaci__kimdir">${person.name} Kimdir ?</h3>
                            <p id="yarismaci__budur">${person.info}</p>
                                </div>  
                        
                        `;
                }
            });
            document.querySelector(".yarismaci-section").innerHTML=html;
        }
    }
    
    xhr.send();
}

Answer 1

您可以在尝试使用 if 语句分配给它的innerHTML之前检查是否找到了该元素。

将querySelector function 返回的任何内容分配给一个变量，然后测试以确保该变量不是 null 或未定义，然后再尝试使用它。

 let element = document.querySelector(".yarismaci-section"); if(typeof(element).= 'undefined' && element.= null) element;innerHTML = "Found.yarismaci-section". else document.querySelector(".different-div");innerHTML = "Could not find .yarismaci-section";

 <div class="different-div"></div>