イベント内で所得した値をイベントのスコープ外で使いたいができない

Question

##問題点
イベント内で発火させた結果を変数に入れて保持をさせて他のイベントや関数で使いたいのですがうまくいきません。

##該当のソースコード

const priceInput = document.querySelector('.search .price input');
let tempValue = null;
priceInput.addEventListener('input', function updateValue(e){
  tempValue = e.target.value;
  console.log(tempValue) //値は取れる
});
console.log(tempValue) //発火させてもnullのままこの値は上書きされない

##試したこと

tempValueという変数を最初にイベント外で宣言をしてあげてイベントが発火したら変数の値が更新すると思っていたのですが違いました。というかやっぱり無理なのかな。。。
もし出来たら幅が広がるので皆さんよろしくお願いいたします。

Answer 1

順番があります。

.search .price input のセレクタに該当する input をクリックして、初めて値を取得でき、
それ以降、tempValue は最後に代入された値を確認できます。

const priceInput = document.querySelector('.search .price input');
let tempValue = null;
priceInput.addEventListener('input', function updateValue(e){
  tempValue = e.target.value;
  console.log(tempValue) //クリック後
});
console.log(tempValue) //クリックしていない

Comments

[keisei-001]

返信ありがとうございます。
この検証が謝っていることは理解出来たのですが、
イベントスコープ外でのイベントの値取得は難しいということでしょうか？

[AkitoshiManabe]

ご質問のコードにあるクリックイベント後に発生する別のイベント等であれば、スコープ外に代入され、保持する値を取得することはできます（イベント発生前に参照しても、初期値の null しか得られません）。

[keisei-001]

let tempValue = null;
priceInput.addEventListener('input', function updateValue(e) {
tempValue = e.target.value;
});
const hoge = document.querySelector(".hoge");
const clickE = (btn) => {
btn.addEventListener('click', () => {
console.log(tempValue);
});
}
clickE(hoge);

これで一旦意図した動きになりました！ありがとうございます

Answer 2

let tempValue = null;
priceInput.addEventListener('input', function updateValue(e) {
  tempValue = e.target.value;
});
const hoge = document.querySelector(".hoge");
const clickE = (btn) => {
  btn.addEventListener('click', () => {
    console.log(tempValue);
  });
}
clickE(hoge);

@AkitoshiManabeさんのコメントを参考に解決しました。ありがとうございました！