Tienes que cambiar dos cosas. Primero, la propiedad que necesita es value no textContent .

Pero no solo lo reemplazamos porque al declarar

 const source = document.querySelector('textarea#source').value;

estamos configurando la source en una cadena por valor, no por referencia . Lo que significa que estamos tomando cuál es el valor en ese momento y lo configuramos. Entonces, en su lugar, simplemente configuramos la source para que haga referencia al objeto del elemento en sí, ya que la configuración de las variables a los objetos se realiza por referencia.

 const source = document.querySelector('textarea#source') // The textArea element

Luego, cuando se activa el evento, nuestro controlador llama a source.value :

 const source = document.querySelector('textarea#source'); // The textArea element document.querySelector('button').addEventListener('click', function() { alert(source.value); });

 <textarea id="source" rows="25"></textarea> <button>click me</button>

const source = document.querySelector('textarea#source').textContent

La línea anterior no mutará cuando cambie el contenido del DOM, porque ya no es un objeto. Es solo una cadena (solo objetos como los tipos de datos pueden mutar), así que haz esto en su lugar.

 const inp = document.querySelector('#source') //document.getElementById('source') document.querySelector('button').addEventListener('click', function() { console.log(inp.textContent) });

 <div id="source" contenteditable> hello </div> <hr/> <button>check</button>

Creo que es porque el valor de la fuente se define cuando se carga ese bloque de código mientras se activa la alerta al hacer clic, pruebe este enfoque y vea si funciona

 document.querySelector('button').addEventListener('click', function() { const source = document.querySelector('textarea#source').textContent; alert(source); });