event click button

Bonjour,

j'essaie de créer un chatbot dynamique mais je suis bloqué sur un point.
La fonction que j'essaie de faire n'est pas exactement celle que je veux mais j'y vais petit à petit pour bien comprendre ce que je fais et donc la mon problème est que lorsque je click sur mon bouton ca n'effectue aucune action alors que j'aimerais que ca m'affiche un message et je ne vois pas ce qui pose problème et dans ma console javascript je n'ai aucun code erreur ...

Mon fichier

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <head>
    <title>Chatbot</title>
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="bot.css" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="bot.js"></script>
    <body>
        <h1 class="col-md-12">Mon CHATBOT</h1>
        <div class="row">
            <h2 class=" second_title col-md-12">Le Bot qui sait tout !</h2>
        </div>
        <div class="chatBot">
            <div class="row">
                <div class="message_container col-md-6">Que souhaites tu savoir aujourd'hui ?</div>
                </div>
            </div>
            <div class="row">
                <textarea class="textArea col-md-12" type="text" id="textArea" required></textarea>
                <button class="button col-md-12" type="button" id="valider">Valider</button>
            </div>
        </div>
.......

Mon fichier JS

Code:

1
2
3
4
 
$('#valider').on( 'click', function () {
    alert("Quelqu'un a cliqué sur le bouton!")
});