Javascriptでtypeofの挙動が意図したものにならない

コード全体

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="css/style.css">
7  <title>Document</title>
8</head>
9<body>
10  <section>
11  
12      <p class="test">僕のテスト、何点だったでしょう?</p>
13      <input id="input_value" type="text">
14      <div id="btn">チェック!</div>
15      <p id="result"></p>
16  </section>
17  <script src="js/main.js"></script>
18</body>
19</html>

css
1body {
2  background-color: pink;
3  margin: 0;
4  padding: 0;
5}
6
7section {
8  background: white;
9  width: 800px;
10  margin: 0 auto;
11  margin-top: 60px;
12  text-align: center;
13  height: 500px;
14  
15}
16
17.test {
18  font-size: 20px;
19  
20  
21}
22
23#input_value {
24  margin-top: 30px;
25}
26
27#btn {
28  background: rgb(137, 137, 233);
29  box-shadow: 0 4px 0 rgb(74, 74, 197);
30  border-radius: 4px;
31  color: white;
32  font-weight: bold;
33  width: 130px;
34  height: 50px;
35  line-height: 50px;
36  margin: 30px auto 0;
37  position: relative;
38  cursor: pointer;
39  user-select: none;
40}
41
42#btn:active {
43  box-shadow: none;
44  top: 4px;
45}
46
47

alert('正解だと思う数値を入力してね!');

const input = document.getElementById('input_value');
const result = document.getElementById('result');
const btn = document.getElementById('btn');

let count = 0; //回答数を保持する変数
let userValue; //ユーザが入力した値を受け取る変数

//0~100を配列で取得する
const scores = [];
for (let i = 0; i < 101; i++) { //scores配列に0~100を格納
  scores.push(i);
}

//randomScoresに0~100までランダムに格納
const randomScore = Math.floor(Math.random() * scores.length);
console.log(randomScore);

//チェックボタンをクリックしたときの処理
btn.addEventListener('click', () => {
  count = count + 1;
  userValue = input.value;
  if(userValue > randomScore) {
    result.textContent = '僕はそんなに賢くないよ!';
    
  }else if (userValue < randomScore) {
    result.textContent = '僕はもっと賢いよ!';
    
  }else {
    result.textContent = `正解おめでとう! 回答数:${count}回`;
  }
  
  //ユーザが数値以外を入力したときの処理
  if (typeof userValue !== "number" ) {
    console.log(userValue);
    alert('数字を入力してね!'); //undefined
  }
  
})

実現したいこと

JavaScriptで、テストの点数を当てるというミ二ゲームを作っています。
ユーザーがもし、間違って数字以外の値を入力した際に、アラートを表示したいです。

試したこと

if文でユーザーの入力した値が、数値以外ならアラートを表示しようとしました。
具体的にはtypeofを使って場合分けを試みました。
しかしなぜか、数字を入力した際も、userValue変数がstringとして認識されてしまいます。(私はここで、userValueがnumberという文字列として認識されることを期待していました。)
typeofのことも調べたのですが、なぜこのような挙動になるのか理解できません。

js
1//チェックボタンをクリックしたときの処理
2btn.addEventListener('click', () => {
3  userValue = input.value;
4  console.log(typeof userValue);　//数字を入力しても、なぜかstringが返ってくる。
5  //ユーザが数値以外を入力したときの処理
6  if (typeof userValue !== "number" ) {
7    
8    alert('数字を入力してね!'); 
9    return;
10  }
11  
12  count = count + 1;
13  if(userValue > randomScore) {
14    result.textContent = '僕はそんなに賢くないよ!';
15    
16  }else if (userValue < randomScore) {
17    result.textContent = '僕はもっと賢いよ!';
18    
19  }else {
20    result.textContent = `正解おめでとう! 回答数:${count}回`;
21    
22  }
23  
24})