###前提・実現したいこと
ボタンをクリックしたとき、それに対応した要素のCSSを変更したい
###該当のソースコード
HTML
1<form> 2<input type="submit" value="カゴへ" class="popup_btn" onclick="showBox()"> 3<div class="popup" style="display:none;"> 4 <div>商品を追加しました。</div> 5</div> 6</form>
###該当のソースコード
JavaScript
1var timerId; 2function showBox() { 3 var popup = document.getElementsByClassName("popup"); 4 for(var i=0, l=popup.length; i<l; i++) { 5 popup[i].style.display="block"; 6 } 7 timerId = setTimeout( closeBox , 3000 ); 8} 9 10function closeBox() { 11 var popup = document.getElementsByClassName("popup"); 12 for(var i=0, l=popup.length; i<l; i++) { 13 popup[i].style.display="none"; 14 } 15}
###やりたいこと
「カゴへ」ボタンをクリックしたとき、ポップアップを表示させたいです。
foreachで上記のHTMLを複数出しているので、どこかのinputをクリックするとpopupクラスがついたdivが一斉に表示されてしまいます。
クリックされたinputと対応したポップアップを表示させたいのですが、どうすればよいでしょうか。
過去にあった同じような質問を拝見しましたが、思うようにいかず困っております。
何卒よろしくお願い致します。
――――追記――――
記述不足で申し訳ないです。
以下参考サイト様です。
https://www.nishishi.com/javascript-tips/temp-box-settimeout.html
karamarimo様
ご指摘通り、確かにタイムアウトの記述は必要ありませんでした。該当の記述を削除させていただきました。
ご指摘いただきありがとうございます。
回答1件
あなたの回答
tips
プレビュー