Uncaught TypeError: Cannot read property 'addEventListener' of null es el error que me da con este código.
Estoy con un proyecto de laravel en el que tengo que meter un div con unos tabs para separar en dos pestañas información.
la pagina esta con bootstrap y jquery por si sirve de algo, no se porque me salta este error y las tabs no funcionan.
El código lo he cogido de codepen y allí funciona, ya he probado todas las posibles soluciones que hay en artículos anteriores aquí y ninguno funciona.
también he revisado el css y ninguna clase parece estar entorpeciendo a el css de este bloque.
no se que mas puedo probar.
//Javascript:
<script type="text/javascript">
var tab1 = document.getElementById('tab-1');//en estas 4 lineas da error
var tab2 = document.getElementById('tab-2');
var item1 = document.getElementById('item-1');
var item2 = document.getElementById('item-2');
tab1.addEventListener('click', function(){
this.classList.add('activeTab'),
tab2.classList.remove('activeTab'),
item1.classList.add('activeItem'),
item2.classList.remove('activeItem');
});
tab2.addEventListener('click', function(){
this.classList.add('activeTab'),
tab1.classList.remove('activeTab'),
item2.classList.add('activeItem'),
item1.classList.remove('activeItem');
});
</script>
//CSS:
<style type="text/css">
.container-tabs{
position: relative;
z-index: 100;
width: 100%;
height: 40px;
display: flex;
justify-content: flex-start;
}
.tab{
padding: 0 30px;
color: #fff;
font-family: 'open sans', sans-serif;
display: flex;
align-items: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 2px solid #fff;
background: #000;
cursor: pointer;
margin-right: 2px;
}
.container-description{
width: 100%;
height: 350px;
position: relative;
z-index: 90;
}
.item{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: 'Georgia', serif;
line-height: 23px;
background-color: #f0f0f0;
padding: 30px 50px 0 50px;
border: 1px solid #e0e0e0;
letter-spacing: 1px;
display: none;
}
.item-1{
position: absolute;
z-index: 100;
}
.activeTab{
background-color: #fff;
color: black;
}
.activeItem{
display: block;
}
</style>
//HTML:
<div class="row">
<div class="container-tabs">
<div class="tab activeTab" id="tab-1">Opcion 1</div>
<div class="tab" id="tab-2">Opcion 2</div>
</div>
<div class="container-description">
<div class="description-item1 item activeItem" id="item-1">
1
</div>
<div class="description-item2 item" id="item-2">
2
</div>
</div>
</div>