addEventListenerの中でif文が使えない

前提・実現したいこと

プログラミングを勉強中の者です。
addEventListenerの中でif文を使いたいのですが、うまく条件分岐が出来ません。

【実現したいこと】
テキストボックスに文字を入力
診断ボタンで送信
文字数をlengthで取得
文字数に応じて条件分岐
条件ごとにテキストを表示

初歩的な質問なのですが、回答いただけると大変ありがたいです。

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

エラーにはならないのですが、全てelseに流れてしまいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>JavaScript Basics</title>
6  </head>
7<body>
8<input type="text" maxlength="100" id="answer">
9<input type="submit" value="診断する" id="btn">
10<div id="out"></div>
11  
12  <script src="js/main.js"></script>
13</body>
14</html>

JavaScript
1'use strict'
2
3  let btn = document.getElementById("btn");
4  
5  btn.addEventListener('click',() => {
6    let answer = document.getElementById("answer");
7    let ans = answer.length;
8    let out = document.getElementById('out');
9    if(ans  >10){
10      out.innerHTML = "あなたに幸せがありますように";
11    }else if(ans >7){  
12      out.innerHTML = "素敵です！";
13    }else if(ans >4){  
14      out.innerHTML = "まあまあです";
15    }else{  
16      out.innerHTML = "ふざけないで";
17    }
18    });

試したこと

console.logで文字数を取得できるか→出来ませんでした
条件の順番を数が小さい順にする

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

pc : mac air
エディター : vscode

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

回答1件

ベストアンサー

inputの値を得たいなら.valueで。

js
1// let answer = document.getElementById("answer");
2//                                               ↓
3   let answer = document.getElementById("answer").value;