1

Tengo un trozo de código que es de un sitio web que está en Internet y estoy copiando ese mismo código para pegarlo en otro sitio web en localhost, pero al hacer esto me esta saliendo un error bastante extraño que no logro solucionar.

Error que me lanza: Uncaught TypeError: Cannot read property 'addEventListener' of null

Error que me lanza por consola

Qué quiero lograr

Lo que quiero lograr es que cuando pulse o haga clic en uno de los 6 botones, por ejemplo en el botón P de párrafo, este me escriba <p></p> automáticamente en el textarea como ya lo he hecho otras veces en otra página web.

Código

var cuerpo = document.querySelector('#body');
var parrafo = document.querySelector('#p');
var strong = document.querySelector('#strong');
var b = document.querySelector('#b');
var a = document.querySelector('#a');
var h2 = document.querySelector('#h2');
var h3 = document.querySelector('#h3');

// Parrafo
parrafo.addEventListener('click', () => {
    var endPos = cuerpo.selectionEnd; // obtiene la posicion del cursor
    var del = cuerpo.value.substring(endPos,cuerpo.value.length); // obtiene valor desde la posicion del cursor hasta el final del valor
    cuerpo.value = cuerpo.value.replace(del,""); // elimina el valor obtenido en del
    cuerpo.value += "<p>"; // añade un h2
    var po = cuerpo.value.length; // obtiene la nueva posicion a poner del cursor ( la posicion anteniro en este caso+ 4 )
    cuerpo.value += "</p>"; // añade del finas del h2
    cuerpo.value += del; // añade el valor eliminado
    cuerpo.focus(); // poner en focus el input
    cuerpo.setSelectionRange(po,po); // pone el cursor dentro de h2
});

// Etiqueta Strong
strong.addEventListener('click', () => {
    var endPos = cuerpo.selectionEnd; // obtiene la posicion del cursor
    var del = cuerpo.value.substring(endPos,cuerpo.value.length); // obtiene valor desde la posicion del cursor hasta el final del valor
    cuerpo.value = cuerpo.value.replace(del,""); // elimina el valor obtenido en del
    cuerpo.value += "<strong>"; // añade un h2
    var po = cuerpo.value.length; // obtiene la nueva posicion a poner del cursor ( la posicion anteniro en este caso+ 4 )
    cuerpo.value += "</strong>"; // añade del finas del h2
    cuerpo.value += del; // añade el valor eliminado
    cuerpo.focus(); // poner en focus el input
    cuerpo.setSelectionRange(po,po); // pone el cursor dentro de h2
});

// Etiqueta <b>
b.addEventListener('click', () => {
    var endPos = cuerpo.selectionEnd; // obtiene la posicion del cursor
    var del = cuerpo.value.substring(endPos,cuerpo.value.length); // obtiene valor desde la posicion del cursor hasta el final del valor
    cuerpo.value = cuerpo.value.replace(del,""); // elimina el valor obtenido en del
    cuerpo.value += "<b>"; // añade un h2
    var po = cuerpo.value.length; // obtiene la nueva posicion a poner del cursor ( la posicion anteniro en este caso+ 4 )
    cuerpo.value += "</b>"; // añade del finas del h2
    cuerpo.value += del; // añade el valor eliminado
    cuerpo.focus(); // poner en focus el input
    cuerpo.setSelectionRange(po,po); // pone el cursor dentro de h2
});

// Enlace
a.addEventListener('click', () => {
    var endPos = cuerpo.selectionEnd; // obtiene la posicion del cursor
    var del = cuerpo.value.substring(endPos,cuerpo.value.length); // obtiene valor desde la posicion del cursor hasta el final del valor
    cuerpo.value = cuerpo.value.replace(del,""); // elimina el valor obtenido en del
    cuerpo.value += "<a href='' class='blue-text'>"; // añade un h2
    var po = cuerpo.value.length; // obtiene la nueva posicion a poner del cursor ( la posicion anteniro en este caso+ 4 )
    cuerpo.value += "</a>"; // añade del finas del h2
    cuerpo.value += del; // añade el valor eliminado
    cuerpo.focus(); // poner en focus el input
    cuerpo.setSelectionRange(po,po); // pone el cursor dentro de h2
});

// H2
h2.addEventListener('click', () => {
    var endPos = cuerpo.selectionEnd; // obtiene la posicion del cursor
    var del = cuerpo.value.substring(endPos,cuerpo.value.length); // obtiene valor desde la posicion del cursor hasta el final del valor
    cuerpo.value = cuerpo.value.replace(del,""); // elimina el valor obtenido en del
    cuerpo.value += "<h2 class='flow-text'>"; // añade un h2
    var po = cuerpo.value.length; // obtiene la nueva posicion a poner del cursor ( la posicion anteniro en este caso+ 4 )
    cuerpo.value += "</h2>"; // añade del finas del h2
    cuerpo.value += del; // añade el valor eliminado
    cuerpo.focus(); // poner en focus el input
    cuerpo.setSelectionRange(po,po); // pone el cursor dentro de h2
});

// H3
h3.addEventListener('click', () => {
    var endPos = cuerpo.selectionEnd; // obtiene la posicion del cursor
    var del = cuerpo.value.substring(endPos,cuerpo.value.length); // obtiene valor desde la posicion del cursor hasta el final del valor
    cuerpo.value = cuerpo.value.replace(del,""); // elimina el valor obtenido en del
    cuerpo.value += "<h3 class='flow-text'>"; // añade un h2
    var po = cuerpo.value.length; // obtiene la nueva posicion a poner del cursor ( la posicion anteniro en este caso+ 4 )
    cuerpo.value += "</h3>"; // añade del finas del h2
    cuerpo.value += del; // añade el valor eliminado
    cuerpo.focus(); // poner en focus el input
    cuerpo.setSelectionRange(po,po); // pone el cursor dentro de h2
});
<!-- BBCode -->
                    <div class="input-field col s12">
                        <button id="p" type="button" class="waves-effect pink darken-2 btn">
                                p
                        </button>

                        <button id="strong" type="button" class="waves-effect pink darken-2 btn">
                            strong
                        </button>

                        <button id="b" type="button" class="waves-effect pink darken-2 btn">
                            b
                        </button>

                        <button id="a" type="button" class="waves-effect pink darken-2 btn">
                            a
                        </button>

                        <button id="h2" type="button" class="waves-effect pink darken-2 btn">
                            h2
                        </button>

                        <button id="h3" type="button" class="waves-effect pink darken-2 btn">
                            h3
                        </button>
                    </div>

Cuando hago clic sobre uno de los botones, este no escribe nada en el textarea como debería de escribir.

4
  • 3
    Tu problema está en el elemento cuerpo, no existe ningún elemento con id="body", si quieres seleccionar el elemento body como tal tienes que hacer algo así: querySelector('body')
    – A. Cedano
    el 23 jul. 2021 a las 19:05
  • El elemento id="body" es el id del textarea, es solo que no lo mostré en el código debido a que solo mostré los botones para escribir las etiquetas de html el 23 jul. 2021 a las 19:27
  • Se requiere siempre un Ejemplo Mínimo y Verificable en las preguntas. Yo probé el código con lo que compartiste en la pregunta y había error porque no encontraba el elemento cuerpo. Si había un textarea con ese id debiste compartirlo inicialmente en la pregunta. Otra cosa, la respuesta aceptada no es del todo correcta, para este caso deberías escuchar la carga del DOM, no la carga de window que es un elemento de jerarquía superior. El código no queda optimizado así. Para más detalles lee esta pregunta y la respuesta dada.
    – A. Cedano
    el 23 jul. 2021 a las 19:32
  • Para evitar confusiones, dado que la pregunta referida es sobre jQuery, aclaro que en vez de window.onload para este caso debes escuchar a DOMContentLoaded, que es el evento que indica que el DOM ha sido cargado. Revisa los ejemplos en la documentación.
    – A. Cedano
    el 23 jul. 2021 a las 19:36

1 respuesta 1

2

Extraño la verdad, se me ocurren dos alternativas con la información proporcionada:

  • Que estes ejecutando el script en el head del html, y por lo tanto el DOM no se haya renderizado y el componente no exista. Por lo que la solución sería mover el script al final del html. Si quieres mantenerlo al principio, puedes hacer que se llame con el evento de carga. Ejemplo:

    window.onload = function() {
      ...tu codigo...
    };
    
  • Dado que buscar componentes por id, usar la alternativa document.getElementById(), aunque el resultado debería ser el mismo.

7
  • Tenias razón, estaba cargando el script en el head y eso era lo que generaba el problema. ya lo solucione. Muchas gracias el 23 jul. 2021 a las 19:07
  • Por alguna razón que desconozco acabo de subir los cambios a producción y en producción me esta saliendo el mismo error que anteriormente y en localhost todo marcha bien. Porque será ? el 23 jul. 2021 a las 19:25
  • Que raro, pero prueba con la función window.onload a ver.
    – ivanph
    el 23 jul. 2021 a las 19:47
  • No me funciona ni siquiera en localhost y no he tocado el código del localhot, no se que esta pasando. el 23 jul. 2021 a las 19:48
  • 1
    cierto, window.onload es js nativo
    – ivanph
    el 23 jul. 2021 a las 19:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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