One common script.js file in two html page causing errors-CodePudding

I am basically a beginner in programming world. So currently facing a problem that I don't understand in which way I should search this solution. So I am here for help. Hope someone can help me. I really need this solution.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Game1</title>
</head>

<body>
    <p id="p1">Lorem ipsum dolor sit amet.</p>

    <script src="script.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Game2</title>
</head>

<body>
    <p id="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, quis!</p>

    <script src="script.js"></script>
</body>

</html>

(function() {
    const p1 = document.getElementById('p1');
    const textChange1 = () => {
        p1.innerHTML = 'textChange 1';
    }
    p1.addEventListener('click', textChange1);
})();


(function() {
    const p2 = document.getElementById('p2');
    const textChange2 = () => {
        p2.innerHTML = 'textChange 2';
    }
    p2.addEventListener('click', textChange2);
})();

So I want to run this script.js file in both Game1.html and Game2.html.

But it causing one error ![Text]https://i.ibb.co/BPVBv4N/html.jpg in Game1.html

script.js:15 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at script.js:15:8
at script.js:16:3

in Game2.html

script.js:6 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at script.js:6:8
at script.js:7:3

I want to use one script file. When game1.html access it I want game1.html to access only the code including id='p1'; and when its game2.html ,I want it to access only the part of js that include id='p2'; how can I achieve this, that the html use only the part of js that is needed not the others.

just like we use one css in multiple html .

note- I want only to use one js file no other sub-js file. Thanks.

CodePudding user response：

Check the element prior to executing, wrap your functions in something like this:

if (document.getElementById('p1') !== null){
 //p1 exists, continue
}

if (document.getElementById('p2') !== null){
 //p2 exists, continue
}

CodePudding user response：

Since the element with id p2 doesn't exist in your first HTML file, it returns undefined. That's why calling p2.addEventListener wont work, because addEventListener is not on undefined.

To fix this you could add a check for if the element existed and only continue if it does.

(function() {
    const p1 = document.getElementById('p1');
    if(!p1) return; // Just replace it with p2 for the other part
    const textChange1 = () => {
        p1.innerHTML = 'textChange 1';
    }
    p1.addEventListener('click', textChange1);
})();

CodePudding user response：

To use the same script.js for the 2 pages you need to check if the element you are selecting exists on that page before adding addEventListener like the example below.

(function() {
    const p1 = document.getElementById('p1');
    if(p1){
        const textChange1 = () => {
            p1.innerHTML = 'textChange 1';
        }
        p1.addEventListener('click', textChange1);
    }
})();


(function() {
    const p2 = document.getElementById('p2');
    if(p2){
        const textChange2 = () => {
            p2.innerHTML = 'textChange 2';
        }
        p2.addEventListener('click', textChange2);
    }
})();