JavaScriptのソースコードでUncaught TypeError: Cannot read property 'length' of undefinedが発生し、独自で調べましたが解決できませ

前提・実現したいこと

JavaScript、CSS、HTMLでWEBページを作成していますがUndefinedのエラーが発生し、
解決方法をご教示いただきたいです。
どこの行にどのようなコードに修正すればよろしいのかご説明いただければ助かります。

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

Uncaught TypeError: Cannot read property 'length' of undefined

該当のソースコード

JavaScript
1(function (){
2    'use strict';
3    const userNameInput = document.getElementById('user-name');
4    const assessmentButton = document.getElementById('assessment');
5    const resultDivided = document.getElementById('result-area');
6    const tweetDivided = document.getElementById('tweet-area');
7    assessmentButton.onclick = () => {
8        const userName = userNameInput.Value;
9        if (userName.length === 0) {  //名前が空の時は処理を終了する
10            return;
11    }
12
13        //診断結果表示エリアの作成
14        const header = document.createElement('h3');
15        header.innerText = '診断結果';
16        resultDivided.appendChild(header);
17
18        const paragraph = document.createElement('p');
19        const result = assessment(userName);
20        paragraph.innerText = result;
21        resultDivided.appendChild(paragraph);
22    
23        // TODO ツイートエリアの作成
24    };
25    
26    const answers = [
27        '{userName}のいいところはまなざしです。{userName}に見つめられた人は洗脳されます。',
28        '{userName}のいいところは情熱です。{userName}の情熱は覇気があります。',
29        '{userName}のいいところは厳しさです。{userName}はかつて鬼軍曹と呼ばれていました。',
30        '{userName}のいいところは知識です。{userName}のIQは200以上です。',
31        '{userName}のいいところはユニークさです。{userName}だけの特徴が周りを楽しくさせます。',
32        '{userName}のいいところは用心深さです。{userName}の洞察力に、多くの人が助けられます。',
33        '{userName}のいいところは見た目です。{userName}のルックスはジャニーズにも負けていません。',
34        '{userName}のいいところは決断力です。{userName}は最後まで貫き通す決意があります。',
35        '{userName}のいいところは思いやりです。{userName}は被災地に必ず募金します。',
36    ];
37
38    /**
39     * 名前の文字列を渡すと診断結果を返す関数
40     * @param {string} userName ユーザ名
41     * @return {string} 診断結果
42     */
43    function assessment(userName) {
44        //全文字のコード番号を取得して足し合わせる
45        let sumOfcharCode = 0;
46        for (let i = 0; i < userName.length; i++) {
47            sumOfcharCode = sumOfcharCode + userName.charCodeAt(i);
48        }
49
50            //文字のコード番号の合計を回答の数で割って添字の数値を求める
51            const index = sumOfcharCode % answers.length;
52            let result = answers[index];
53
54            result = result.replace(/{userName}/g, userName);
55            return result;
56    }
57
58    //テストコード
59 
60    console.assert(
61        assessment('太郎') === assessment('太郎'),
62        '入力が同じ名前なら同じ診断結果を出力する処理が正しくありません。'
63    );
64})();

試したこと

Uncaught TypeErrorの発生理由を調べましたが解決できませんでした。

補足情報（FW/ツールのバージョンなど）

Visual Stadio Code：Ver1.39.2
Google Chrome：Ver77

kyoya0819

2019/11/02 14:41

HTMlもご提示ください

退会済みユーザー

2019/11/02 14:58

以下、HTMLコードになります。よろしくお願いいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="assessment.css"> <title>あなたのいいところは？</title> </head> <body> <h1>あなたのいいところは？</h1> <p>診断したい名前を入れてください</p> <input type="text" id="user-name" size="40" maxlength="20"> <button id="assessment">診断する</button> <div id="result-area"></div> <div id="tweet-area"></div> <script src="assessment.js"></script> </body> </html>