質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

694閲覧

配列にpushしたがconsoleで確認するとpushされていない

kenta-05

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/05/01 02:53

Javascriptでlet clickedBtnIndex = [];という空の配列を作り、そこに各ボタンのindexを配列として入れていくためにpushしているのですがconsoleを開いきながらカートボタンを押しても配列にindexがpushされません。
alertを使用したときはしっかりと数字が表示されて配列にpushされているように見えたのですがどのように解決すればいいのかわからずアドバイスを頂きたいです。よろしくお願いいたします。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head>**ボールドテキスト** 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Let's SHOPPING</title> 8 <link rel="stylesheet" href="css/html5reset-1.6.1.css"> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11<body> 12 <header> 13 <h1>Let's SHOPPING</h1> 14 <div class="cart"> 15 <div class="cart_cnt hidden"> 16 <span id="js_cart_cnt"></span> 17 </div> 18 <a class="cart_icon" href="confirm.html"> 19 <img src="img/cart.png" alt=""> 20 </a> 21 </div> 22 </header> 23 <div id="wrapper"> 24 <div class="item_wrapper"> 25 <ul class="item_list"> 26 <li class="item"> 27 <div class="item_img"> 28 <img src="img/denim.png" alt=""> 29 </div> 30 <div class="item_textbox"> 31 <div class="item_title"><h2>ズボン</h2></div> 32 <div class="item_price"><span class="yen_symbol">¥</span><span class="js_get_price">3,000</span></div> 33 <div class="item_btnarea"> 34 <button class="item_cart_btn js_cart_btn" data-name="ズボン" data-price="3000">カート</button> 35 <a class="item_buy_btn" href="confirm.html">購入</a> 36 </div> 37 </div> 38 </li> 39 <li class="item"> 40 <div class="item_img"> 41 <img src="img/funnel.png" alt=""> 42 </div> 43 <div class="item_textbox"> 44 <div class="item_title"><h2>ジョウロ</h2></div> 45 <div class="item_price"><span class="yen_symbol">¥</span><span class="js_get_price">2,000</span></div> 46 <div class="item_btnarea"> 47 <button class="item_cart_btn js_cart_btn" data-name="ジョウロ" data-price="2000">カート</button> 48 <a class="item_buy_btn" href="confirm.html">購入</a> 49 </div> 50 </div> 51 </li> 52 <li class="item"> 53 <div class="item_img"> 54 <img src="img/glasses.png" alt=""> 55 </div> 56 <div class="item_textbox"> 57 <div class="item_title"><h2>メガネ</h2></div> 58 <div class="item_price"><span class="yen_symbol">¥</span><span class="js_get_price">20,000</span></div> 59 <div class="item_btnarea"> 60 <button class="item_cart_btn js_cart_btn" data-name="メガネ" data-price="20000">カート</button> 61 <a class="item_buy_btn" href="confirm.html">購入</a> 62 </div> 63 </div> 64 </li> 65 <li class="item"> 66 <div class="item_img"> 67 <img src="img/painting.png" alt=""> 68 </div> 69 <div class="item_textbox"> 70 <div class="item_title"><h2>風景画</h2></div> 71 <div class="item_price"><span class="yen_symbol">¥</span><span class="js_get_price">500,000</span></div> 72 <div class="item_btnarea"> 73 <button class="item_cart_btn js_cart_btn" data-name="風景画" data-price="500000">カート</button> 74 <a class="item_buy_btn" href="confirm.html">購入</a> 75 </div> 76 </div> 77 </li> 78 <li class="item"> 79 <div class="item_img"> 80 <img src="img/wine.png" alt=""> 81 </div> 82 <div class="item_textbox"> 83 <div class="item_title"><h2>ワイン</h2></div> 84 <div class="item_price"><span class="yen_symbol">¥</span><span class="js_get_price">4,000</span></div> 85 <div class="item_btnarea"> 86 <button class="item_cart_btn js_cart_btn" data-name="ワイン" data-price="4000">カート</button> 87 <a class="item_buy_btn" href="confirm.html">購入</a> 88 </div> 89 </div> 90 </li> 91 <li class="item"> 92 <div class="item_img"> 93 <img src="img/cake.png" alt=""> 94 </div> 95 <div class="item_textbox"> 96 <div class="item_title"><h2>ホールケーキ</h2></div> 97 <div class="item_price"><span class="yen_symbol">¥</span><span class="js_get_price">3,000</span></div> 98 <div class="item_btnarea"> 99 <button class="item_cart_btn js_cart_btn" data-name="ホールケーキ" data-price="3000">カート</button> 100 <a class="item_buy_btn" href="confirm.html">購入</a> 101 </div> 102 </div> 103 </li> 104 <li class="item"> 105 <div class="item_img"> 106 <img src="img/diamond.png" alt=""> 107 </div> 108 <div class="item_textbox"> 109 <div class="item_title"><h2>ダイアモンド</h2></div> 110 <div class="item_price"><span class="yen_symbol">¥</span><span class="js_get_price">10,000,000</span></div> 111 <div class="item_btnarea"> 112 <button class="item_cart_btn js_cart_btn" data-name="ダイアモンド" data-price="10000000">カート</button> 113 <a class="item_buy_btn" href="confirm.html">購入</a> 114 </div> 115 </div> 116 </li> 117 <li class="item"> 118 <div class="item_img"> 119 <img src="img/bicycle.png" alt=""> 120 </div> 121 <div class="item_textbox"> 122 <div class="item_title"><h2>自転車</h2></div> 123 <div class="item_price"><span class="yen_symbol">¥</span><span class="js_get_price">30,000</span></div> 124 <div class="item_btnarea"> 125 <button class="item_cart_btn js_cart_btn" data-name="自転車" data-price="30000">カート</button> 126 <a class="item_buy_btn" href="confirm.html">購入</a> 127 </div> 128 </div> 129 </li> 130 <li class="item"> 131 <div class="item_img"> 132 <img src="img/bread.png" alt=""> 133 </div> 134 <div class="item_textbox"> 135 <div class="item_title"><h2>食パン</h2></div> 136 <div class="item_price"><span class="yen_symbol">¥</span><span class="js_get_price">150</span></div> 137 <div class="item_btnarea"> 138 <button class="item_cart_btn js_cart_btn" data-name="食パン" data-price="150">カート</button> 139 <a class="item_buy_btn" href="confirm.html">購入</a> 140 </div> 141 </div> 142 </li> 143 <li class="item"> 144 <div class="item_img"> 145 <img src="img/dumbbell.png" alt=""> 146 </div> 147 <div class="item_textbox"> 148 <div class="item_title"><h2>ダンベル</h2></div> 149 <div class="item_price"><span class="yen_symbol"></span><span class="js_get_price">1,000</span></div> 150 <div class="item_btnarea"> 151 <button class="item_cart_btn js_cart_btn" data-name="ダンベル" data-price="1000">カート</button> 152 <a class="item_buy_btn" href="confirm.html">購入</a> 153 </div> 154 </div> 155 </li> 156 </ul> 157 </div> 158 </div> 159 <script src="js/kenta.js"></script> 160</body> 161</html>

js

1const btns = document.querySelectorAll(".item_cart_btn"); 2 3 4let clickedBtnIndex = []; 5let cartIcon = document.querySelector(".cart_cnt"); 6let cartIconNumberBox = document.querySelector(".js_cart_cnt"); 7let cartNumber = 0; 8 9console.log(cartIcon); 10console.log(clickedBtnIndex); 11 12 13if(clickedBtnIndex.length > 0){ 14 cartIcon.classList.remove("hidden"); 15} 16 17 18btns.forEach((btn , index)=>{ 19 btn.addEventListener("click", ()=>{ 20 if(btn.classList.contains("item_cart_btn_active")){ 21 btn.classList.remove("item_cart_btn_active"); 22 clickedBtnIndex.splice(index,1); 23 // alert(clickedBtnIndex); 24 }else{ 25 btn.classList.add("item_cart_btn_active"); 26 clickedBtnIndex.push(index); 27 // alert(clickedBtnIndex.length); 28 }; 29 }) 30}); 31 32console.log(clickedBtnIndex); 33 34 35 36 37

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

consoleを開いきながらカートボタンを押しても配列にindexがpushされません。

最後の行にconsole.log(clickedBtnIndex);がありますが、これはイベントの発生前に1回だけ実行されますので、イベント発生後の状況を追随しないです。

投稿2021/05/01 02:58

maisumakun

総合スコア145208

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kenta-05

2021/05/01 04:49

ご回答いただきありがとうございます。 まだまだ理解が乏しく大変恐縮ですがもう少し詳しく教えて頂けないでしょうか。
maisumakun

2021/05/01 05:13

alertのコメントがあるところにconsole.logを書いてみてはどうでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問