【解決方法】"背景がヌルです" しかし、なぜだろう

[ad_1]

だから、色が変わる背景を作りたかったのです。スクリプトは問題なく動作し、満足しています。しかし、現在、背景が null であるというエラーがあります。

JavaScript

const scroll = ( color, selector, offset ) => {
  const [red, green, blue] = color;
  const background = document.querySelector( selector );
  window.addEventListener('scroll', () => {
      const y = 1 + (window.scrollY || window.pageYOffset) / offset;
      const [r, g, b] = [red/y, green/y, blue/y].map(Math.round);
      background.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
  });
};
scroll([255, 255, 255], '.background1', 250);
scroll([0, 208, 255], '.background2', 500);

私が試したこと：

.ready 関数を試しました。 document.addEventListener(“DOMContentLoaded”) を試しましたが、それでも機能しませんでした。そこで私は助けを求めるという考えを思いつきました。

解決策 1

const background = document.querySelector( selector );

ここで述べたように： Document.querySelector() – ウェブ API | MDN[^]

ドキュメントメソッド querySelector() 指定されたセレクターまたはセレクターのグループに一致するドキュメント内の最初の Element を返します。一致するものが見つからない場合は、null が返されます。

background が null であることはわかっているので、どのセレクターを渡しているのか、それに対応する要素が実際に返されるかどうかを確認する必要があります。

[ad_2]