eventListener not working because typeError-CodePudding

What i am trying to do is to give an alert to the siguiente button. Icreated the variable and called the elements by their id. The error that shows up is TypeError: document.getElementById(...) is null I have added with the DOM some elements like the buttons siguiente and Salir. The thing is that the null is showing everytime i declare a variable for the event on the app.js line 48

var section = document.querySelector('seccion');
var container = document.querySelector('container');

var optionButtons = document.querySelector('option-buttons')
var participanteUno = document.getElementById('participante1')
var participanteDos = document.getElementById('participante2');
var historiaLevelUno = 0
var historiaLevelDos = 0


var historia1 = function() {
    alert('has recibido un nuevo correo, ¿deseas leerlo?')
    var base1 = document.getElementById('base');
    if(historiaLevelUno == 0) {
    base1.innerHTML = '<p> el correo</p>'
      
   
}
var contenedor = document.getElementById('contenedor');
var borrarParticipanteUno = document.getElementById('option-buttons').removeChild(participanteUno) 
var borrarParticipanteDos = document.getElementById('option-buttons').removeChild(participanteDos);
var botonTerminarJuego = document.createElement('button')
botonTerminarJuego.setAttribute('id', 'salir')
    botonTerminarJuego.innerText = 'Salir'
var optionButtons = document.getElementById('option-buttons').appendChild(botonTerminarJuego)
    
    var modEstiloSalir = document.getElementById('salir').style.color = 'black'
var botonSiguiente = document.createElement('button')
botonSiguiente.setAttribute('id', 'siguiente')
botonSiguiente.innerText = 'Siguiente'
optionButtons = document.getElementById('option-buttons').appendChild(botonSiguiente)
var modEstiloSiguiente = document.getElementById('siguiente').style.color = 'black'

var btnGrid = document.getElementById('option-buttons')
btnGrid.style.border = '1px'
btnGrid.style.padding = '10px'
}


var esteban1 = participanteUno.addEventListener('click', historia1, true);


var siguiente = function() {
    alert('funciona')

}
var optionButtons = document.getElementById('option-buttons')
var ejecutarSiguiente = document.getElementById('siguiente').addEventListener('click',siguiente, true)

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text Adventure</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
<link href="style.css" rel="stylesheet">
<section>
    <head>
    <div id="titulo">
        <h1>Nombre de la obra</h1>
    </div>
</head>
</section>  
</head>
<body>
    <section id="seccion">    
    <div id="contenedor" >
        <div id="base">
            <p id="text">Intrucciones: <br> Estás entrando a una obra que requiere de toda tu atención, ya que serás parte de la historia. Para adentrarte a ella deberás hacer uso del botón 'Siguiente' que te mostrará las indicaciones y te ayudará a seguir con la historia. Además, podrás observar el botón 'Terminar juego'; al presionarlo podrás salir de este. Te recomendamos que lo uses en caso de  una emergencias (aburrimiento, fatiga, etc.) siempre y cuando hayas acordado con el participante frente a ti previamenente. <br> Lo primero que deberás hacer es escoger qué participante quisieras interpretar (acuerdalo con la persona frente a tí). Una vez hecho esto, presiona el participante que escogiste y podrás empezar con la historia. <br> Ahora sí, que comience la función... </p>
        </div>
        <div id="option-buttons" >
        <button id='participante1' >Participante 1</button>  
        <button id='participante2' >Participante 2</button>            
        </div>
    </div>
    </section>    
    <script type='text/javascript' src="app.js"></script>
    
</body>
</html>`

CodePudding user response：

You are trying to assign an "addEventListener('click', callbackFn)" to an element that doesnt exist yet.

Your element id="siguiente" is added when you call "function historia1()", before that, it doesnt exist yet.

Solution: After you append your element to the div id="option-buttons", add the event listener to your button.

optionButtons = document.getElementById('option-buttons').appendChild(botonSiguiente)
document.getElementById('siguiente').addEventListener('click',siguiente, true);

See here