Ustawienie tekstu na elemencie

0

Mam problem z ustawieniem tekstu w paragrafie. Chcę, aby JavaScript ustawił tekst na elemencie o **id="message-me". **Konsola wyrzuca, że wartość jest null.
Nie mam już pomysłu, co może być nie tak. W projekcie korzystam również z bootstrapa i mam wrażenie, że może nie wiem o czymś, co powinnam dodać, żeby kod działał. Gdy zrobiłam na szybko stronkę bez bootstrapa i użyłam tego kodu, to wszystko działało. Będę bardzo wdzięczna za pomoc.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> XXX </title>

    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Sacramento|Ubuntu&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css"> 

    <link rel="icon" href="favicon (1).ico">

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 
    <script src="script.js" type="text/javascript"></script>


</head>

<section class="contact" id="mail">  

    <div class="container">
        <h3><i class="fas fa-envelope"></i> Kontakt</h3>
        <div class="row">
            <div class="col-md-12">
                <p>
                    e-mail: <span id="message-me">Mail</span>
                </p>
            </div>
  
        </div>
    </div>

</section>

document.addEventListener("DOMContentLoaded", function(){

let user = "abcd";
let site = "gmail.com";
let mailUpdate = `${user}@${site}`; 

let mail = document.getElementById("#message-me"); 
mail.innerText = mailUpdate; 
    
});
1 
document.addEventListener("DOMContentLoaded", function(){

let user = "abcd";
let site = "gmail.com";
let mailUpdate = `${user}@${site}`;  
let mail = document.querySelector("#message-me");
mail.innerText = mailUpdate; 

});

1 użytkowników online, w tym zalogowanych: 0, gości: 1