MakeShopの商品詳細画面で商品画像を切り替えたい #MakeShop,javascript

やりたいこと

商品詳細ページで、色やサイズなどのオプションを選択し、それに応じた商品画像に切り替えたい。
amazonなどTシャツを買うときによくある機能。
※MakeShopの機能ではできなかった（調べた範囲では）

やろうとしてつまずいてしまったこと

いつものように<select>タグにidをつけて、getElementById('example').valueでオプションの値を取得しようと思っていたが上手くはいかなかった。
そう、MakeShopはタグによって動的にオプションを含んだ<select>タグが生成されてしまうからだった（しかもidなしで）

実装のため調査

MakeShop(以下、MS)では”タグ”と言うものでDBからのデータを引っ張ってきてHTMLを生成しレンダリングしている。PHPと似ている。
検証ツールで調べると<select>タグにidはないがclass="select"とついていた。
こ　れ　だ　！

実装のためにやったと

まず、

const element = document.querySelector("select");

これでclass属性が"select"である<select>タグにelementを定義する。次に

element.id = "target";

この行で、<select>タグに対してJSでidを付与する。
ここまでくればあとは

<html>

<div id="main_image">
    <img src="*********">
</div>
<select class="select" id="target">
    <option value ="0">空色</option>
    <option value ="1">黄色</option>
　　　　  <option value ="２">菫色</option>
</select>

</html>

<sctipt>
//elementが生成されているならば以下の処理を実行
if (element) {
  element.id = "target";
  var select = document.getElementById("target");
  const switchImage = document.getElementById("main_image");

//ここで初期表示されているsrcを保管する
  const restoreImage = switchImage.src;
　　
　　　　select.onchange = function (obj) {
　　　　　　　　switch(this.value):
  　　　　case "0":
  　　　　　switchImage.src = "******空色の画像URL*****";
　　　　　　　　break;

　　　　　　　　switch(this.value):
 　　　　 case "1":
 　　　　 switchImage.src = "******黄色の画像URL*****";
　　　　　　　　break;

　　　　　　　　switch(this.value):
 　　　　 case "3":
 　　　　 switchImage.src = "*****菫色の画像URL******";
　　　　　　　　break；
    }
}
　　
</script>

感想

早く画像切り替え機能を実装していただきたい。