javascript – No encuentro el Error en mi programa de js

hola soy nuevo en la programación, el caso es que estoy haciendo un ejercicio que consiste en realizar un pequeño programa en js que crea historias diferentes al azar, insertando cadenas de texto en la cadena principal, cuando lo voy a ejecutar en la consola del navegador me dice que hay un error en la linea 21, este(Uncaught TypeError: Cannot read property ‘addEventListener’ of null at main.js:21), de mi código, pero no lo ve

var btn = document.getElementById('#randomize');
var p = document.getElementsByClassName('.story');
const historia = 'Hacía 94 grados Fahrenheit afuera, así que :insertx: salio caminar. Cuando llegaron a :inserty: , miraron con horror por unos momentos, luego :insertz: . Bob lo vio todo, pero no se sorprendió, Bob pesa 300 libras y era un día caluroso.';

var nuevaHistoria = historia;
var intercepcion1 = ('Willy el Duende','Papá grande','Papá Noel');
var intercepcion2 = ('el comedor de beneficencia','Disneylandia','la casa Blanca');
var intercepcion3 = ('se quemo espontáneamente','se derritido en un charco en la acera','se convirtió en una babosa y se arrastró lejos');
var intercepcion123 = (intercepcion1,intercepcion2,intercepcion3);
var intercepciones = (':insertx:',':inserty:',':insertz:');
        
function generarHistoria(){
    for(let i=0; i<3; i++){
        var aleatorio = Math.round(Math.random()*2);
        nuevaHistoria = nuevaHistoria.replace(intercepciones(i),intercepcion123(i)(aleatorio));
    }
        p.textContent = nuevaHistoria;
        p.style.visibility = 'visible';
}

btn.addEventListener('click' , generarHistoria);
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Generador de Historias Absurdas.</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://es.stackoverflow.com/main.js" defer></script>
    </head>
    <body>
        <div>
            <label for="customname">Ingrese un nombre personalizado:</label>
            <input type="text" id="customname" value="nombre">
        </div>
        
        <div>
            <label for="us">US</label>
            <input id="us" type="radio" name="ukus" value="us" checked>
            <label for="uk">UK</label>
            <input id="uk" type="radio" name="ukus" value="uk">
        </div>
        
        <div>
            <button id="randomize">Genera una historia aleatoria</button>
        </div>
        <p class="story"></p>
    </body>
</html>  

o , por favor alguien me puede ayudar, aquí les dejo la captura de pantalla para que se guíen mejor y gracias.