javaScriptで変数を設定しているにも関わらず、表示結果にundifinedが出てくるので解決したいです。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
umedyでjavascriptの勉強をしています。
動画のとおりにコードを書いていると思うのですが、javascriptで
リフレッシュした際のブラウザの結果画面　<button class="btn">抽選</button>　の上に"undifined"と表示されます。

変数を正しく入れていると思うのですが、なぜ、思い通り（変数に入れてある名字が表示される）にいかないのかわかりません。

発生している問題・エラーメッセージ

ディベロッパーツールのconsoleを見ても特にエラーメッセージは表示されていません。

エラーメッセージ

該当のソースコード

javascript
1ソースコード

// ビンゴの参加者リスト
var nameList = ["小菅","佐藤","小林","中村","本田"];

var num = Math.floor(Math.random()*nameList.legnth);

document.querySelector("#number").innerText = nameList[num];

該当のソースコード（参考）

html
1ソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript NAME BINGO</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="css/sanitize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <h1 class="text-center">JavaScript NAME BINGO</h1>

<div class="inner">
  <!-- 抽選ボタンなど -->
  <div class="lottery-area">
    <span id="number"></span>
    <button class="btn">抽選</button>
    <button class="btn disable">ストップ</button>
  </div>
  <!-- 抽選ボタンなど -->

  <!-- 抽選結果リスト -->
  <div class="result-area">
    <h2 class="text-center">結果</h2>
    <ul class="result-list">
      <li class="result-item"></li>
      <li class="result-item"></li>
      <li class="result-item"></li>
      <li class="result-item"></li>
      <li class="result-item"></li>
      <li class="result-item"></li>
    </ul>
  </div>
</div>
  <!-- 抽選結果リスト -->

</div> <script src="js/script.js"></script> </body> </html>

該当のソースコード（参考）

css
1ソースコード

@charset "UTF-8";
body{
font-family: 'Roboto', "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic,'Meiryo UI',Meiryo,"ＭＳゴシック",Arial, sans-serif;
}
.wrapper{
max-width: 960px;
margin: 32px auto;
}
.inner{
display: flex;
}
.lottery-area{
flex: 1 1 auto;
}
.result-area{
flex:0 0 300px;
/* width: 300pxでも可能 */
}
.text-center{
text-align:center;
}
.btn{
display: block;
width: 160px;
margin-bottom: 20px;
padding: 8px;
background-color: #4950a4;
color: #fff;
cursor: pointer;
}
.disable{
background-color: #aaa;
}