Q&A
前提・実現したいこと
ボタンを押すことで製品の色が変わるシミュレータを作っています。
１つの画像で２箇所の色を変えられるようにしています。
１つのアイテムを色替えするために1箇所は15色、backgroundimageで5色、画像を変えています。
１アイテムにつき３点の同じ画像をボタン一つで同時に変更できるようにしたいです。
発生している問題・エラーメッセージ
backgroundimageで色替えしている部分が１アイテムの画像３つあるうちの一つしか変わりません。
該当のソースコード
<!--HTML--> <!--色替え１５色の部分--> <ul class="color_button_ul"> <div><span>前板ｶﾗｰ：</span><span id="message">ボタンを押して前板カラーを選択してください。</span></div> <li class="color_button_li"><input type="button" class="color_button" onclick="color_wh()" value="ﾎﾜｲﾄ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_skwh()" value="SKﾎﾜｲﾄ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_dcwh()" value="DCﾎﾜｲﾄ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_wdwh()" value="ｳｯﾄﾞﾎﾜｲﾄ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_gna()" value="Gﾅﾁｭﾗﾙ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_no()" value="Nｵｰｸ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_late()" value="ﾗﾃ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_mid()" value="ﾐﾃﾞｨｱﾑ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_stn()" value="ｽﾃﾝ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_lg()" value="LGｽﾃﾝ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_wn()" value="ｳｫｰﾙN"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_br()" value="ﾌﾞﾗｳﾝ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_rb()" value="ﾗｽﾃｨBR"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_win()" value="ﾜｲﾝ"></li> <li class="color_button_li"><input type="button" class="color_button" onclick="color_bk()" value="ﾌﾞﾗｯｸ"></li> </ul> <!--問題の色替え５色の部分--> <div><span>ﾎﾞﾃﾞｨｶﾗｰ：</span><span id="message3">ボタンを押してボディカラーを選択してください。</span></div> <ul id="body_button_ul"> <button onclick="setBackground('../../img/more_a/ub/morea_ub_40hst_bodywh.png');">ﾎﾜｲﾄ</button> <button onclick="setBackground('../../img/more_a/ub/morea_ub_40hst_bodyna.png');">ﾅﾁｭﾗﾙ</button> <button onclick="setBackground('../../img/more_a/ub/morea_ub_40hst_bodywh.png');">ｳｫｰﾙN</button> <button onclick="setBackground('../../img/more_a/ub/morea_ub_40hst_bodyna.png');">ﾌﾞﾗｳﾝ</button> <button onclick="setBackground('../../img/more_a/ub/morea_ub_40hst_bodywh.png');">ﾌﾞﾗｯｸ</button> </ul><!--問題の色替え５色の部分のjavascript--><td><div class="draggable"><div class="productimg40"> <span> <img id="body01" class="no1 body40" src="../../img/more_a/ub/morea_ub_40hst_wh.png " name="imgLink" title="40HST" style="background:url(../../img/more_a/ub/morea_ub_40hst_bodywh.png)"> <img id="body02" class="no2 body40" src="../../img/more_a/ub/morea_ub_40hst_wh.png" name="imgLink2" title="40HST" style="background:url(../../img/more_a/ub/morea_ub_40hst_bodywh.png)"> <img id="body03" class="no3 body40" src="../../img/more_a/ub/morea_ub_40hst_wh.png" name="imgLink3" title="40HST" style="background:url(../../img/more_a/ub/morea_ub_40hst_bodywh.png)"> </span> </div></div></td>
function setBackground( $img ) {
let $element = document.querySelector( ".body40");
$element.style.backgroundImage = "url( " + $img + " )";
document.querySelector( ".body40" );
}
回答1件
0
ベストアンサー
backgroundimageで色替えしている部分が１アイテムの画像３つあるうちの一つしか変わりません。
.body40全てに同時に変更をかけるならdocument.querySelectorではなくdocument.querySelectorAllです。
javascript
1function setBackground( $img ) { 2 let elementList = document.querySelectorAll( ".body40"); 3 elementList.forEach((element) => { 4 element.style.backgroundImage = "url( " + $img + " )"; 5 }); 6}
投稿2020/08/28 08:27
総合スコア2411
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/28 08:35
2020/08/28 08:35
2020/08/28 08:55