Javascriptでinputタグのvalueが取得できない

前提・実現したいこと

javascript初学者です。現在、<input type="text" id="chat-input">で取得したvalueを<input type="button" value="SEND" id="chat-send">を押したらvalueが表示されるという実装を試みているのですが、なぜか入力したvalueが表示されず困っています。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7  <link rel="stylesheet" type="text/css" href="practice.scss">
8  <script type="text/javascript" src="practice.js"></script>
9</head>
10<body>
11  <div class="wrapper">
12    <div class="contents">
13      <input type="text" id="chat-input">
14      <input type="button" value="SEND" id="chat-send">
15      <ul>
16      </ul>
17    </div>
18  </div>
19</body>
20</html>

javascript
1window.onload= function (){
2  var button = document.getElementById("chat-send");
3  var input = document.getElementById("chat-input").value;
4  button.addEventListener("click", send);
5  function send () {
6    var element = document.createElement("p");
7    var text = document.createTextNode(input);
8    document.body.appendChild(element).appendChild(text);
9  }
10}

自分で調べたことや試したこと

なぜかわからないのですが、jsファイルの３行目にあるvar input = document.getElementById("chat-input").value;の value の頭文字を大文字にして Value とすると下の画像のようにundefinedと出てしまいますが、一応表示されます。

よろしくお願いいたします。

行動規範の内容に同意します

回答3件

.appendChild(element).appendChild(text);

appendChildは戻り値があるわけではないのでメソッドチェーンできません
またinputの位置もおかしそうです

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  var button = document.getElementById("chat-send");
3  button.addEventListener("click", send);
4  function send () {
5    var input = document.getElementById("chat-input").value;
6    var element = document.createElement("p");
7    var text = document.createTextNode(input);
8    element.appendChild(text);
9    document.body.appendChild(element);
10  }
11});
12

リファクタリングするとこんなかんじ

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  document.querySelector("#chat-send").addEventListener("click",()=>{
3    document.querySelector("body").appendChild(
4      [document.createTextNode(
5        document.querySelector("#chat-input").value
6        )].reduce(
7        (x,y)=>(x.appendChild(y),x),document.createElement("p")
8        )
9      )
10  });
11});