javascriptのstyle.transformが効かない

Question

前提

javascriptにて、マウスカーソルをボタンに乗せた時に画像をscaleで拡大する動作を実装したいと考えているのですが、javascriptで「img1.style.transform = "scale(2, 2)";」というコードを書いてもうまく反映されません。

配列に対してaddEventListenerを設定しているのがいけないと思ったのですが、エラーを見る限り「= "scale(2, 2)";」という箇所が原因で不具合が出ているようでした。.style.transformの表記やスペルミスがないかどうかをチェックしたのですが、原因が分からず困っています。

エラーコード

Uncaught TypeError: Cannot set properties of undefined (setting 'transform')
at HTMLDivElement.<anonymous> (script.js:6:26)
(anonymous) @ script.js:6

該当のソースコード

<div class="sectionContainer">
        <div class="imgParent">
          <img class="img" id="img1" src="http://presnt.jp/img/top/24.jpg" alt="">
        </div>
        <div class="scrollBtn">
          <a href="#" class="scrollBtnBefore"></a>
          <a href="#" class="scrollBtnAfter"></a>
        </div>
      </div>

      <div class="sectionContainer">
        <div class="imgParent">
          <img class="img" id="img2" src="http://presnt.jp/img/top/23.jpg" alt="">
        </div>
        <div class="scrollBtn">
          <a href="#" class="scrollBtnBefore"></a>
          <a href="#" class="scrollBtnAfter"></a>
        </div>
      </div>

      <div class="sectionContainer">
        <div class="imgParent">
          <img class="img" id="img3" src="http://presnt.jp/img/top/21.jpg" alt="">
        </div>
        <div class="scrollBtn">
          <a href="#" class="scrollBtnBefore"></a>
          <a href="#" class="scrollBtnAfter"></a>
        </div>
      </div>

.sectionContainer {
  margin: 0 auto 50px auto;
  width: 950px;
  max-width: 100%;
  position: relative;
}

.imgParent {
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.img {
  width: 100%;
  transition: all 1.3s ease 0s;
}

.img:hover {
  transform: scale(1.05, 1.05);
}

.scrollBtn {
  display: flex;
  position: absolute;
  bottom: 0;
  right: -63px;
}

.scrollBtnBefore,
.scrollBtnAfter {
  display: block;
  height: 53px;
  width: 63px;
  background-color: #0000CD;
}

const btns = document.getElementsByClassName('scrollBtn');

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('mouseover', () => {
    const img1 = document.getElementsByClassName('img1');
    img1.style.transform = "scale(2, 2)";
  });
}

Comments

[Cocode]

↓無視してください〜〜失礼しました。
---
const img1 = document.getElementsByClassName('img1')[0]

これでできないでしょうか？
できましたら解説します〜〜〜。

Answer 1

    const img1 = document.getElementsByClassName('img1');

img1 は idなので、getElementsByClassNameでは取得できないのでエラーになってます。
getElementByIdで取得すればいいでしょう。

    const img1 = document.getElementById('img'+(i+1));

あるいは、getElementsByClassName で行くなら、

    const img1 = document.getElementsByClassName('img')[i];

Comments

[suzu1234]

エラーの所ばかり見て定数部分を見落としていました、、getElementsByClassNameを使ったコードも書いていただき参考になりました、ありがとうございます

Answer 2

正解は他の方が解明してくださったので補足説明を失礼します。

• .getElementsByClassName('class-name')で要素を取得すると、たとえ1つしか要素がなかったとしても、length = 1の配列（のようなもの）です。
  • 直接.addEventListener()はできないです。
• 一つしかないのがわかっているのであれば、getElementsByClassName('class-name')[0]で、配列（のようなもの）の0番目を指定してやると、要素として取得できます。
  • でも一つしかないのであればidを使うべきです。
  • 今回の質問者様の場合、htmlではちゃんとid名としてimg1をつけられていたので、その辺の理解は大丈夫そうです。

例）

<div class="hoge">1つだけ</div>

const hoge = document.getElementsByClassName('hoge');
console.log(hoge); // HTMLCollection [div.hoge]
console.log(hoge[0]); // <div class="hoge">1つだけ</div>

Comments

[suzu1234]

.getElementsByClassNameで取得した要素が配列とみなされる関係で.addEventListener()が使えないのですね、、今まで別なコードを書いていてもエラーが出ていたのはここの認識が間違っていたからかもしれません。解説ありがとうございます

Answer 3

const img1 = document.getElementsByClassName('img');
img1[i].style.transform = "scale(2, 2)";かな。

HTMLの構造を変えればJavaScriptなしでできます。

      <div class="sectionContainer">
        <div class="scrollBtn">
          <a href="#" class="scrollBtnBefore"></a>
          <a href="#" class="scrollBtnAfter"></a>
        </div>
        <div class="imgParent">
          <img class="img" id="img3" src="http://presnt.jp/img/top/21.jpg" alt="">
        </div>
      </div>

.scrollBtn:hover+.imgParent>.img{
  transform: scale(2, 2);
}

Comments

[kei344]

:has()を使えばHTMLの構造を変える必要がなかった。（Firefoxは対応してなかったけど）
```CSS
.sectionContainer:has(.scrollBtn:hover) img {
transform: scale(2, 2);
}
```
https://jsfiddle.net/06kt5xhd/

[suzu1234]

jsで書くよりもこちらの方がシンプルですね、、ご回答ありがとうございます！