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

Question

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.

Check the element exists before adding an event listener to it? — evolutionxbox
– evolutionxbox, Commented Apr 27, 2022 at 15:17

Ilan P · Accepted Answer · 2022-04-27 15:19:36Z

2

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
}

answered Apr 27, 2022 at 15:19

Ilan P

1,7921 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fahad Ishan Over a year ago

Really Appreciate your answers. It worked. But If I use kind of a big project, do I have to run this kind of code again and again, or is there any better solution for bigger project? Thanks again

Ilan P Over a year ago

Ideally, you'll want to make an array (a grouped set) of all your IDs; and loop through them in a single call instead of having a million functions checking if they exist; if they exist you can bind a function to them or return them in a list to be handled (ie: existing list); you never want to overdo when you can do with a single procedure :)

Fahad Ishan Over a year ago

Thanks . If you don't mind can you give a small example with the above code. That will be really helpful

Ilan P Over a year ago

Check this out: jsfiddle.net/ilanpatao/wb3nuqas/5 shows you quick concept, we have an array of ids, we iterate until the length (end) of the array, we check what exists and what doesn't - the console prints which exists which does not;

JanuZz_dk · Accepted Answer · 2022-04-27 15:22:06Z

0

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);
})();

answered Apr 27, 2022 at 15:22

JanuZz_dk

12014 bronze badges

Comments

gilnak · Accepted Answer · 2022-04-27 15:27:37Z

0

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);
    }
})();

answered Apr 27, 2022 at 15:27

gilnak

32 silver badges4 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related