I have a piece of code that is from a website that is on the Internet and I am copying that same code to paste it in another website on localhost, but when doing this I am getting a rather strange error that I cannot solve.
Error that throws me: Uncaught TypeError: Cannot read property 'addEventListener' of null
What do I want to achieve?
What I want to achieve is that when I press or click on one of the 6 buttons, for example on the paragraph P<p></p>
button, it automatically writes me in the textarea as I have done other times in another web page.
Code
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>
When I click on one of the buttons, it doesn't write anything to the textarea as it should.
I miss the truth, I can think of two alternatives with the information provided:
That you are executing the script in the head of the html, and therefore the DOM has not been rendered and the component does not exist. So the solution would be to move the script to the end of the html. If you want to keep it at the beginning, you can have it called with the load event. Example:
Since looking for components by id, use the alternative
document.getElementById()
, although the result should be the same.