Alguna manera de solucionar el Error en la consola en Google "Uncaught TypeError: Cannot read property 'getAttribute' of null at HTMLDocument.init"
HTML:
const TypeWriter = function(txtElemente, words, wait = 2000) {
this.txtElemente = txtElemente;
this.words = words;
this.txt = "";
this.wordIndex = 0;
this.wait = parseInt(wait, 10);
this.type();
this.isDeleting = false;
}
// Type Method
TypeWriter.prototype.type = function() {
console.log("hello");
setTimeout(() => this.type(), 500);
}
//Init On Dom Load
document.addEventListener ("DOMContentLoaded", init)
//Init App
function init() {
const txtElemente = document.querySelector(".txt-type");
const words = JSON.parse(txtElemente.getAttribute("data-words"));
const wait = txtElemente.getAttribute("data-wait");
// Init Typer Writer
new TypeWriter(txtElemente, words, wait);
}
<header>
<div class="header">
<div class="contenedor">
<img src="fotos/naet-logo.png" alt="logo" class="logo">
<div class="menu-icon">
<i class="fas fa-bars" style="color: black"></i>
</div>
<nav>
<ul>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="pagina1.html">Acerca</a>
</li>
<li>
<a href="#">Contacto</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="fondo-jumbo">
<div id="contenedor-typer">
<p class="naet-queretaro-naet">Naet</p>
<p class="naet-queretaro-queretaro">Querétaro
<span id="typer1" data-wait="2000" data-words='["Magico","Increible","Perfecto","Sensacional"]'></span>
</p>
</div>
<center>
<p class="jumbo-flecha">
<a href="#page-one">
</a>
</p>
</center>
</div>
<div class="rectangulo-cuerpo ">
<div class="rectangulo-blanco ">
</div>
</div>
<section class="index-z">
<div class="rectangulo-abajo uno ">
<div class="linea1 uno1 ">
<div class="columna1 uno2 ">
<div class="caja1 uno3 ">
<div class="titulo2 uno4 ">
<i class="fab fa-pagelines " style="font-size:43px;color:white "></i>
<h2>Natural</h2>
</div>
<div class="price1 uno5 ">
<h2>
</h2>
</div>
<div class="option uno6 ">
<ul>
<li>
<i class="fas fa-leaf " style="font-size:18px;color:white "></i>
<p>tecnica de desensibilización natural de las alergias</p>
</li>
<p class="movimiento-flecha ">
<i class="fas fa-level-down-alt " style="font-size:18px;color:white "></i>
</p>
</ul>
<div id="page-one">
<a href="" class="acerca-link">
<img src="fotos/logo-claro5.png " alt=" " width="70 " class="imagen-blanca ">
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="rectangulo-abajo dos ">
<div class="linea1 dos1 ">
<div class="columna1 dos2 ">
<div class="caja1 dos3 ">
<div class="titulo1 dos4 ">
<i class="far fa-thumbs-up " style="font-size:40px;color:white "></i>
<h2>Permanente</h2>
</div>
<div class="price1 dos5 ">
<h2>
</h2>
</div>
<div class="option dos6 ">
<ul>
<li>
<i class="fas fa-leaf " style="font-size:18px;color:white "></i>
<p>Todos resultados positivos son permanentes</p>
</li>
<p class="movimiento-flecha ">
<i class="fas fa-level-down-alt " style="font-size:18px;color:white "></i>
</p>
</ul>
<a href=" " class="link-acerca ">
<img src="fotos/logo-claro5.png " alt=" " width="70 " class="imagen-blanca "> </a>
</div>
</div>
</div>
</div>
</div>
<div class="rectangulo-abajo tres ">
<div class="linea1 tres1 ">
<div class="columna1 tres2 ">
<div class="caja1 tres3 ">
<div class="titulo1 tres4 ">
<i class="fas fa-check " style="font-size:40px;color:white "></i>
<h2>Eficiente</h2>
</div>
<div class="price1 tres5 ">
<h2>
</h2>
</div>
<div class="option tres6 ">
<ul>
<li>
<i class="fas fa-leaf " style="font-size:18px;color:white ">
</i>
<p>Todos tus problemas de salud resueltos naturalmente</p>
</li>
<p class="movimiento-flecha ">
<i class="fas fa-level-down-alt " style="font-size:18px;color:white "></i>
</p>
</ul>
<div id="acerca-link">
<a href="#acerca-link">
<img src="fotos/logo-claro5.png " alt=" " width="70 " class="imagen-blanca ">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</section>
<footer>
<p>
<b>Naet reconocido Internacionalmente </b>
<i class="fas fa-globe"></i>
</p>
</footer>
<div class="showcase">
<h1>HEllo</h1>
</div>
<script src="boot-js/jquery-3.2.1.min.js "></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js "></script>
<script src="boot-js/naet.js "></script>
<script src="boot-js/typer.js"></script>
No estoy seguro del porque de este error. Gracias por ayudarme :)