JavaScriptのセレクトフォームでの取得する際に気を付けること

セレクトボタンに躓く。
HTMLでセレクトフォームをつくり、その値を取得しようと思ったが、できなかったので共有したいと思う。
キーポイントは関数の内側か外側か、だ。

〇

//成功例
var select_button = document.getElementById("format-select");
select_button.addEventListener('change', function(){
  var selectedValue = document.getElementById("format-select").value;
//value取得を関数内に
  var target = document.getElementById("target");
  text= ""
  if (selectedValue == 1){
    text = "1";
  } else if (selectedValue == 2){
    text = "2";
  } else {
    text = "3";
  }
  target.innerHTML = text;
});
-----
> 2

✖

//失敗例
var select_button = document.getElementById("format-select");
var selectedValue = document.getElementById("format-select").value;
//value取得を関数外に
select_button.addEventListener('change', function(){
  var target = document.getElementById("target");
  text= ""
  if (selectedValue == 1){
    text = "1";
  } else if (selectedValue == 2){
    text = "2";
  } else {
    text = "3";
  }
  target.innerHTML = text;
});
-----
> 1

セレクトボックスのバリューを取得し、その値をテキストとして出力したかった。
HTMLに選択すると、
しかし、下のコードの、関数の外に値を取得しようとすると、pタグに表示されるのが行いたい数字ではない。

See the Pen Untitled by nishiura tsukasa (@tukaskas7777) on CodePen.

解決策としては関数内にvar変数を入れてしまうことだ。
この理由はなにかよくわからないから教えてもらったりしたい。
勉強中でご勘弁を。