0

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>

Error de consola en Google introducir la descripción de la imagen aquí

No estoy seguro del porque de este error. Gracias por ayudarme :)

2
  • 3
    Hola, es mejor que pongas el código en texto y no una imagen. Por otra parte, estás haciendo document.querySelector('.txt-type') pero en tu HTML no veo ningún elemento con la clase .txt-type, de ahí que cuando intentas acceder a getAttribute de ese elemento te dé ese error.
    – Kiko_L
    Commented el 8 oct. 2018 a las 7:30
  • Sube el código como texto aunque no se vea bien, te ayudamos a arreglarlo ;) Commented el 8 oct. 2018 a las 8:22

1 respuesta 1

0

No tienes ninguna clase llamada .txt-type, la estas llamando en el document.querySelector pero como no hay ninguna clase llamada de esa manera, pues te lanza ese error

1
  • 2
    Hola @Lyon Developer Bienvenido a StackOverFlow, te invito a leer Como responder , lo que hicistes actualmente es un comentario, sabemos que no tienes por ahora los privilegios suficientes, te recomiendo agregar una respuesta valida o eliminar la respuesta Commented el 8 oct. 2018 a las 16:25

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.