HTMLページでマウスオーバーすると背景画像が変わるJavaScriptを組む

#前提
　個人サイトを立ち上げる関係で、参考にしたサイトがスライドショーを実装していて「かっこいいな」と思い、自分なりに力技で解決した。
##マウスオーバーすると背景が変わる
　仕組み自体は単純で、HTML上でdivにクラスを設定、そのクラスにJavaScriptのdocument.querySelctor()とstyle.backgroundプロパティでスタイルをいじるだけです。

index.html

<div class="top">
	<ul>
		<li><a href="foo.html"><span class="record" id="1">examplePicture1</span></a></li>
		<li><a href="foo.html"><span class="record" id="2">examplePicture2</span></a></li>
		<li><a href="foo.html"><span class="record" id="3">examplePicture3</span></a></li>
		<li><a href="foo.html"><span class="record" id="4">examplePicture4</span></a></li>
	</ul>
</div>

script.js

document.querySelectorAll('.record').forEach((targetbox) =>{
	targetbox.addEventListener('mouseover', () =>{
		const topPic = document.querySelector('.top');
		if( targetbox.id == '1'){
			topPic.style.background = 'url(imgs/examplePic1.png)';
		}else if( targetbox.id == '2'){
			topPic.style.background = 'url(imgs/examplePic2.jpg)';
		}else if( targetbox.id == '3'){
			topPic.style.background = 'url(imgs/examplePic3.png)';
		}else if( targetbox.id == '4'){
			topPic.style.background = 'url(imgs/examplePic4.png)';
		}
	})
})

　この2つをそのまま実装すると、箇条書きになったリンクをマウスオーバーすることでdivブロック内の背景が変わります。

　ifとelseでつなげている部分がとっても力技めいていて改善の余地ありです。どうにかswitch文に変えてみてもいいかもしれません。

##仕組み
　HTML側はクラスとIDを設定しているだけなので割愛します。

document.querySelectorAll('.record').forEach((targetbox) =>{
	targetbox.addEventListener('mouseover', () =>{

　ここでクラス「record」を付与されている要素をすべて選択し、イベントリスナーを使ってマウスオーバーされた要素を選択しています。

const topPic = document.querySelector('.top');
		if( targetbox.id == '1'){
			topPic.style.background = 'url(imgs/examplePic1.png)';

　マウスオーバーされた要素のIDがNだった場合、style.backgroundで背景をN番目のものに変える……という動作をif文で繰り返します。力技です。気になる方はconsole.log(targetbox)を適当な場所に挿入して確かめてみてください。
##今後
　数十秒ごとに画像やhoverが変わるスライドショー型スクリプトの実装や、リンクの視認性を高めるための画像加工スクリプトを（あれば）実装していきたいと思っています。順次投稿予定。