javascript（クリック時のアイコン回転）

Question

前提・実現したいこと

JavaScriptでクリックしたら画像アイコンが90度回転するコードを書いています。
簡単なコードであるはずなのですが、基礎がわかっておらず、CSSの記述との連携が全くわかりません。
すみませんがご教授ください。

該当のソースコード

//html

<div id="more"> <img src="common/images/hover.png" alt="詳細"> </div>

//css
//#more:active{
transform: rotate(-90deg);
}

//javascript{
window.addEventListener('load', function(){
document.getElementById('more').addEventListener('click', function() {
this.classList.toggel('active');
})
})

試したこと

本当はimgタグにclassを付与して、直接回転をしたかったのですが、imgタグに直接だとうまくいかないのかなあと思って、divタグで囲ったのが上記のコードです。

//html

<img class="more" src="common/images/hover.png" alt="詳細">

//css
.more:active{
transform: rotate(-90deg);
}

//javascript{
window.addEventListener('load', function(){
document.getElementsByclass0.addEventListener('click', function() {
this.classList.toggel('active');
})
})

～補足～
jQueryの記述でも結構ですので、ご教授くださるとうれしいです。

Answer 1

簡単なサンプル作成したので参考にしてみてください。

<img src="common/images/hover.png" alt="詳細" class="img">

.img.active {
  transform: rotate(-90deg);
}

const img = document.querySelector('.img');
img.addEventListener('click', () => {
  img.classList.toggle('active');
});

Comments

[komatta...]

ありがとうございました！動きました。。助かりました～

ちなみに、記載外の部分で
pointer-events:noneをかけていたので、動かなかった要因もつよかったみたいです。

同様にはまった方は参考になれば。