How can I call one JavaScript file for many HTML file?

Question

I am trying to do website which has more than one page.
In the getYarismaciName function I am tryin to get cards (in the first HTML page) innerHTML and sending getJSON function. In this function I am trying to add some HTML code in .yarismaci-section (in the second page) using innerHTML but in this part I get "Uncaught TypeError: Cannot set property 'innerHTML' of null" error I guess js still searching yarismaci-section in the first HTML page but it is in the second page. How can I fix this error?

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

You can check whether or not the element was found before trying to assign to it's innerHTML with an if statement.

Assign whatever is returned by the querySelector function to a variable then test to make sure that the variable isn't null or undefined before trying to use it.

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>