実現したいこと
クリックすると要素が回転する機能を実装したいです。
ここに実現したいことを箇条書きで書いてください。
・要素をクリック
・回転
・要素をクリック（２回目）
・回転
以降繰り返し
前提
html/css JavaScriptでクリックをすると回転する要素を作りました。
初回のクリックで回転することは確認できました。
2回目以降のクリックで回転しないことを確認しました。
2回目以降のクリックでも回転するように実装を行いたいです。
発生している問題・エラーメッセージ
2回目以降のクリックで回転しない。
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3 4<head>5 <meta charset="UTF-8">6 <meta http-equiv="X-UA-Compatible" content="IE=edge">7 <meta name="viewport" content="width=device-width, initial-scale=1.0">8 <title>roll</title>9</head>10 11<body>12 13 <div></div>14 15 <style>16 div {17 width: 30px;18 height: 10px;19 border-radius: 10px;20 background: #000;21 }22 23 .roll {24 transform: rotate(360deg);25 transition: all 1s;26 }27 </style>28 <script>29 const bar = document.querySelector('div')30 console.log(bar)31 bar.addEventListener('click', () => {32 bar.classList.remove('roll')33 bar.classList.add('roll')34 })35 </script>36</body>37 38</html>
試したこと
bar.classList.toggelとすることで、クリックの奇数回は回転することを確認しました。
削除を行ってから付与したらいいのかと思い、今に至ります。
以上になります。
ご教授いただけますと幸いです。
0 コメント