I cannot run a script from an external page

Question

Good evening I’ve been trying to create a javascript script that when the user clicks on a word within a menu on the site, a span appears with a text. I was able to do the script and it worked perfectly when I was on the index.html page, but when I passed the script to the.js page, it stopped working. Just to clarify this is basically my group’s TCC, we’re setting up a website for a medical clinic, our programmer changed schools during the pandemic, we lost contact with it is our project, so I’m in charge of programming, I appreciate the help from now on, and accept any hint you’re willing to share.
edition: Basically what I want to do is when the user clicks on any of the names of the specialties, appear a span talking about the specialty.

function iniciapop(popid) {
    const pop = document.getElementById(popid);
    if (pop) {
        pop.classList.add('mostrar');
        pop.addEventListener('click', (e) => {
            if (e.target.id == popid || e.target.className == 'fechar') {
                pop.classList.remove('mostrar');
            }
        });
    }
}
const abrir = document.querySelector('.logo');
abrir.addEventListener('click', () => iniciapop('popup'));

body {
    padding: 0 auto;
    margin: 0 auto;
}
.header {
    width: 100%;
    }

    .Menu-Principal {
        width: 100%;
    background-color: #252323;
    height: 60px;
}

    
.logo { 
    padding: 10px;
    background: black;
    height: 40px;
}
.header-2 {
     background-color: #ffffff;
    width: 980px;
    margin:0 auto;
    padding:15px;
     /*Ajustar padding para 0*/
}
.Tela-100 {
     width: 100%;
    float:left;
    position: relative;
}

.Menu-Secundario {
    border-bottom: 5px solid #efefef;
    height: 80px;
    background-color: #ffffff;
}
    
.menu ul li {
    display: inline-block;
    color: #8b8b8b;
    margin-left:15px;
    height: 38px;
}
    
.menu ul li:hover {
    border-bottom: 2px solid #00bac6;
}
    
.menu ul li a:hover {
    color:#00bac6;
}
.menu ul li a {
    color: #8b8b8b;
    text-decoration: none;
    font-size: 22px;
    /* text-transform: uppercase */
}
    
.menu {
    width:56%;
    float:left;
    margin-left: -23px;
}
.Busca {
width: 27%;
float: left;
padding: 10px;
text-align:center;
}
    
.busca input{
    margin-top: 3px;
    height: 33px;
    width:190px;
    padding:12px;
    background-image: url('../img/BuscaIcon.png');
    background-repeat: no-repeat;
    background-position: 93%;
    border: 1px solid #d6d6d6;
}
    
.login {
width: 15%;
float: left;
margin-left: 2px;
}
    
.login ul {
    padding: 0;
}

.login ul li {
    display: inline-block;
    color: #8b8b8b;
    height: 38px;
    margin-left: 5px;
}
    
.login ul li:hover {
    border-bottom: 2px solid #00bac6;
}
    
.login ul li a:hover {
    color:#00bac6;

}
.login ul li a {
    color: #8b8b8b;
    text-decoration: none;
    font-size: 22px;
}

.blocos-1{
    padding: 0px;
    margin: 0px;
    width: 100%;
    position: relative;
}

.bloco-texto-1{
    min-width: 490px;
    background-color: #54789b; /* or #54789b  #007fff */
    font-family: sans-serif;
    float: left;
    width: 50%;
    overflow: hidden;
    height: 600px;
}

.textprinci{
    color: #ffffff;
    margin-left: 4%;
    overflow: hidden;   
    margin-top: 20px; 
}

.textprinci p mark{
   color: #233547;
    background-color: #54789b;  
}

.textprinci p1{
    font-size: 45px;
    margin-left: 7% !important;
}

.textprinci p{
    font-size: 20px;
}

.bloco-img1{
    min-width: 490px;
    float: right;
    width: 50%;
    overflow: hidden;
}

.bloco-img1 img{
    height: 600px;
}

.list-1{
    margin-left: 4%;
    margin-top: 20px;
}

.list-1 ul-1{
    color: #ffffff;
    width: 48%;
    float: left;
}

.list-1 ul-2{
    color: #ffffff;
    width: 51%;
    float: left;
}

.list-1 ul-2 a, ul-1 a {
    text-decoration: none;
    color: white;
    font-size: 25px;
    font-family: sans-serif;
}

.title{
    background-color: #233547; /*or #1a6295 */
    height: 130px;
}

.title h1{
    color: #ffff;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 50px;
    padding-top: 3%;
}

.blocos-2{
    padding: 0px;
    margin: 0px;
    width: 100%;
    position: relative; 
}

.bloco-img-2{
    float: left;
    width: 50%;
}

.bloco-img-2 img{
    width: 100%;
}

.bloco-text-2{
    background-color: #233547;
    width: 50%;
    float: right;
    min-width: 490px;
    font-family: sans-serif;
    overflow: hidden;
    height: 656px ;
}

.textprinci-2{
    color: #ffff;
    margin-left: 4%;
    margin-top: 20px;
}

.textprinci-2 p1{
    font-size: 45px;   
}

.textprinci-2 p{
    font-size: 20px;
}

.textprinci-2 p mark{
    color: #7be9e7;
    background-color: #233547;
}

.list-2{
 margin-left: 4%;
}

.list-2 ul-3{
    color: #ffffff;
    /*width: 48%;
    float: left;*/
}

.list-2 ul-3 a{
    text-decoration: none;
    color: white;
    font-size: 25px;
    font-family: sans-serif;
}

.popup-container{
width:100%;
height:100%;
background:rgba(0,0,0,.5);
position:fixed;
top:0px;
left:0px;
z-index:2000;
display:none;
justify-content:center;
align-items:center;
}

.popup-container.mostrar{
    display:flex;
}

.pop{
background:#ffff;
width:60%;
min-width:300px;
padding:40px;
border:10px solid #111a23;
box-shadow: 0 0 0 10px white;
position:relative;
}

.fechar {
position:absolute;
font-size:1.2em;
top:0px;
right:0px;
width:50px;
height:50px;
border-radius:50%;
border:4px solid white;
background:black;
color:white;
cursor:pointer;
box-shadow: 0 4px 4px rgba(0,0,0,.3);
}


@keyframes pop{
from {
opacity:0;
transform:translated3d(0, -60px, 0);
}
to{
opacity:0;
transform:translated(0, 0, 0);
}
}

.mostrar .pop{
animation: pop .3s;
}

.pop h1{
    font-size:40px;
    font-family: sans-serif;
}

.pop p{
    font-size: 25px;
    font-family: sans-serif;
}

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./css/pagEspecialidades.css">
    <script type="text/javascript" src="./js/pagEspecialidades.js"></script>
    <title>Imperium Especialidades</title>
</head>

<body>
    <header class="Menu-Principal">
        <main>
            <div class="Header-1">
                <div class="logo">
                    <ul>
                        <li><a href="#"><img src="./img/Logo.png"> </a></li>
                    </ul>
                </div>
            </div>
        </main>
    </header>
    <main class="Tela-100 Menu-Secundario">
        <div class="Header-2">
            <div class='Menu'>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="pagSobreNos.html">Sobre Nos</a></li>
                    <li><a href="pagEspecialidades.html">especialidades</a></li>
                    <li><a href="">Exames</a></li>
                    <li><a href="">Contato</a></li>

                </ul>

            </div>
            <div class="Busca">
                <input placeholder="Pesquise" type="text" />
            </div>
            <div class="Login">
                <ul>
                    <li><a href="./paglog.html">Login</a></li>
                    <li><a href="">Cadastro</a></li>
                </ul>
            </div>
    </main>
    <main class="Tela-100 Especialidades">
        <div class="title">
            <h1>Especialidades</h1>
        </div>
        <div class="Blocos-1">
            <div class="Bloco-texto-1">
                <div class="TextPrinci">
                    <p1>
                        Especialidades Médicas
                    </p1>
                    <p>
                        Para a prevenção ou tratamento de determinadas doenças, é necessário dirigir-se a um médico
                        especialista.
                    </p>
                    <p>
                        A Clínica oferece várias especialidades médicas com acolhimento diferenciado e
                        profissionais dedicados a cuidar do seu problema de maneira específica. <MARK> Clique na
                            especialidade
                            para
                            mais informações.</MARK>
                    </p>
                </div>
                <div class="list-1">
                    <ul-1>
                        <li><a href="">Acupuntura</a></li>
                        <li><a href="">Angiologia</a></li>
                        <li><a href="">Cardiologia</a></li>
                        <li><a href="">Clínica Médica</a></li>
                        <li><a href="">Dermatologia</a></li>
                        <li><a href="">Endocrinologia</a></li>
                        <li><a href="">Gastroenterologia</a></li>
                        <li><a href="">Ginecologia</a></li>
                        <li><a href="">Neurologia</a></li>
                        <li><a href="">Obstetrícia</a></li>

                    </ul-1>
                    <ul-2>
                        <li><a href="">Oftalmologia</a></li>
                        <li><a href="">Ortopedia</a></li>
                        <li><a href="">Otorrinolaringologia</a></li>
                        <li><a href="">Pediatria</a></li>
                        <li><a href="">Pneumologia</a></li>
                        <li><a href="">Psiquiatria</a></li>
                        <li><a href="">Radiologia</a></li>
                        <li><a href="">Reumatologia</a></li>
                        <li><a href="">Urologia</a></li>
                    </ul-2>
                </div>
            </div>
            <div class="bloco-img1">
                <img src="./img/especialidades-medicas.jpg">
            </div>
        </div>
        <div class="Blocos-2">
            <div class="Bloco-img-2">
                <img
                    src="https://static.wixstatic.com/media/bd5fed_a0a5988801854a69a44c4a51c3e13f60~mv2_d_3189_2126_s_2.jpg/v1/fill/w_1424,h_1480,al_c,q_90,usm_0.66_1.00_0.01/bd5fed_a0a5988801854a69a44c4a51c3e13f60~mv2_d_3189_2126_s_2.webp">
            </div>
            <div class="Bloco-text-2">
                <div class="TextPrinci-2">
                    <p1>
                        Especialidades Odontológicas
                    </p1>
                    <p>
                        A Clínica Rio de Janeiro oferece vários tratamentos odontológicos para deixar seu sorriso mais
                        bonito e saudável. <MARK>Clique na especialidade para mais informações.</MARK>
                    </p>
                    <div class="list-2">
                        <ul-3>
                            <li><a href="">Cirurgia e Traumatologia Buco – Maxilo – Facial</a></li>
                            <li><a href="">Endodontia</a></li>
                            <li><a href="">Implantodontia</a></li>
                            <li><a href="">Odontogeriatria</a></li>
                            <li><a href="">Odontologia estética</a></li>
                            <li><a href="">Odontopediatria</a></li>
                            <li><a href="">Ortodontia</a></li>
                            <li><a href="">Periodontia</a></li>
                            <li><a href="">Prótese Dentária</a></li>
                        </ul-3>
                    </div>
                </div>
            </div>
        </div>
        <div id="popup" class="popup-container">
            <div class="pop">
                <button class="fechar">x</button>
                <h1 class="subtitulo">Qualquer coisa</h1>
                <form>
                    <p>O odontopediatra atua na prevenção, manutenção e reabilitação da saúde bucal da criança, educando
                        sobre saúde bucal, fazendo o diagnóstico, a prevenção, o tratamento e controle dos problemas da
                        saúde bucal infantil. </p>
                </form>
            </div>
        </div>
    </main>
</body>

</html>

Answer 1

This type of error occurs because the script is executed before the complete loading of the DOM.

There are some ways to prevent this error.

I use:

window.onload = function() { ... Code }

Has other approaches

https://stackoverflow.com/questions/26107125/cannot-read-property-addeventlistener-of-null/26107174

If I remember any response from here of the site that addresses more deeply I edit.

Answer 2

Thanks, I got an approach that fits my scenario by the link, also did not know about window.onload = Function(){}, researched and applied a few times, helped me with some future problems. Thank you very much :).