スクロール中のみ要素を透過させる

Question

---### スクロールイベントによって、スクロール中のみ要素を透過させて、また元に戻すことを繰り返したい

現在サイト作成においてサイドバーをスクロール中に透過させてスクロールが止まったらまた表示させてを繰り返したいのですがうまく行きません。一応、スクロールを始めると透過はするのですが、そのあとはなにも起こりません。
ご存知の方お力添えをいただきたいと思っています。

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

Uncaught TypeError: Cannot read property 'add' of undefined

該当のソースコード

<div id="single" class="column-320 single-320"></div>

.active{
 opacity:0.4;
}

試したこと

jsで色々いじっていますがエラーではなぜか「add」が読めないというエラーが出てしまいます。
現在のjsは下記の通りになってます。

var timeoutId = document.getElementById('single')；
 window.addEventListener("scroll", function(){
  timeoputId.classList.add("active");
  
  clearTimeout(timeoutId)l;

  timeoutId = setTimeout( function(){
   timeoutId.classList.remove("active");
}, 500);
});

よろしくお願いいたします

Answer 1

用途に合わせて変数を用意しましょう。
現状のコードではtimeoutIdという変数を要素の格納とタイムアウトIDの格納2つに使用しようとしています。
また、timeoputIdは書き間違いかと思います。

Comments

[TakehiroShinmyo]

コメントいただきありがとうございました！
おかげさまで無事に動くようになりました！ありがとうございます。
varに初期化を宣言するという機能があることを知らなかったため、今回のようなミスになってしまいました。
今回のご回答をいただいてからjsを

var timeoutId
var single = document.getElementById('single');

window.addEventListener("scroll", function(){
single.classList.add("active");

clearTimeout( timeoutId );

timeoutId = setTimeout( function() {
single.classList.remove("active");
}, 500);
});

としましたら正常に動作致しました。迅速なご回答ありがとうございました