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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

Q&A

解決済

1回答

683閲覧

addeventListenerにエラーが発生してしまう

suzu1234

総合スコア41

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

0グッド

1クリップ

投稿2022/10/01 08:30

編集2022/10/01 17:55

実現したいこと

http://presnt.jp/
こちらのサイトの2ページ目にある青いボタンがあると思うのですが、こちらのボタンにカーソルを合わせると画像が拡大する動きを実装したいと考えています。

自分が書いたコードはボタンと画像を取得し、addeventristenerのmouseoverでカーソルがボタンに乗った時に画像をcalcで拡大するというものなのですが、エラーが発生してしまいます。

イメージ説明

発生している問題・エラーメッセージ

Uncaught TypeError: btn.addEventListener is not a function at script.js:60:5

該当のソースコード

<body id="body"> <div class="scrollJs"> <header> <div class="container"> <h1><a href="#">present.</a></h1> <div id="toggle-btn"> <span></span> <span></span> <span></span> </div> <div id="navArea"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">About</a></li> </ul> </nav> <div class="summary"> <span>presents.</span> <p>Defining and designing brands that make a difference.</p> <a href="https://www.pinterest.jp/"><i class="fa-brands fa-pinterest"></i></a> <a href="https://twitter.com/"><i class="fa-brands fa-twitter"></i></a> </div> </div> </div> </header> </div> <!-----------------------------------------------------------------------------> <main> <div class="scrollJs"> <div id="linkCollection"> <div class="container"> <a href="#">Japan Weather Association</a><a href="#">NP Kakebarai</a><a href="#">eisai.jp</a><br/> <a href="#">Nomura Recruitment</a><a href="#">Aluxe Diamond</a><a href="#">FORCAS</a><a href="#">Ontomo</a><br/> <a href="#">Aoi Forum</a><a href="#">Present. (v3)</a><a href="#">Ibaraki Christian University</a><a href="#">Asoview!</a><br/> <a href="#">Orenznero</a><a href="#">Sunmai</a><a href="#">Yokohama City University</a><a href="#">Techmatrix</a><br/> <a href="#">Power Idea Camp</a><a href="#">Wallcolor・Present. (v2)</a><a href="#">Nad</a><br/> <a href="#">Allday</a><a href="#">En factory</a><a href="#">Das.</a><a href="#">Stageworks inc.</a> <a href="#" id="linkCollectionBtn"> <p>Featured Projects</p> </a> </div> <video src="video/video.mp4" muted autoplay playsinline loop></video> </div> </div> <!-- --------------------------------------------------------------------------> <div class="scrollJs"> <section id="section01"> <div class="sectionContainer"> <div class="imgParent"> <img class="img" src="img/24.jpg" alt=""> </div> <div class="scrollBtn"> <a href="#" class="scrollBtnBefore"></a> <a href="#" class="scrollBtnAfter"></a> </div> <div class="textGroup"> <p>Featured Projects</p> <h2> Japan Weather<br/> Association </h2> <p> Corporate /<br/> Website, Pamphlet </p> </div> </div> </section> </div> </main> <script src="script.js"></script> </body>
html { font-size: 100%; } img { max-width: 100%; width: 100%; vertical-align: bottom; } * { box-sizing: border-box; outline: 1px solid magenta; } body { font-family: "OptimaLTPro-Roman", "Ryumin Regular KL", serif; color: #0000CD; margin: 0; padding: 0; overflow: hidden; /*スクロールを消す*/ } a { text-decoration: none; } /*////////////////////////////////////////////////////////////////////////////*/ .container { margin: 0 auto; width: 1335px; max-width: 100%; } .sectionContainer { margin: 0 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 { display: block; height: 53px; width: 63px; background-color: #0000CD; position: relative; } .scrollBtnBefore::before { content: ""; display: block; background-color: #003399; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1, 0); transform-origin: top; transition: transform 0.3s ease 0s; } .scrollBtnBefore:hover::before { transform: scale(1, 1); transform-origin: bottom; } .scrollBtnBefore::after { content: ""; display: block; height: 6px; width: 6px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(315deg); position: absolute; top: calc(50% - 3px); left: calc(50% - 3px); } .scrollBtnAfter { display: block; height: 53px; width: 63px; background-color: #0000CD; position: relative; } .scrollBtnAfter::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #003399; transform: scale(1, 0); transform-origin: bottom; transition: transform 0.3s ease 0s; } .scrollBtnAfter:hover::before { transform: scale(1, 1); transform-origin: top; } .scrollBtnAfter::after { content: ""; display: block; height: 6px; width: 6px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(135deg); position: absolute; top: calc(50% - 3px); left: calc(50% - 3px); } .textGroup { position: absolute; top: 47%; left: -175px; } .textGroup p:nth-of-type(2) { font-size: 1.3125rem; } h2 { font-size: 3.7rem; font-weight: normal; margin: 45px 0 55px 0; line-height: 1; } /*////////////////////////////////////////////////////////////////////////////*/ header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } header .container { display: flex; justify-content: space-between; align-items: center; padding-top: 60px; } h1 { font-family: "OptimaLTPro-Roman", "Ryumin Regular KL", serif; display: inline-block; letter-spacing: 2px; font-size: 2.1rem; font-weight: normal; } h1 a { display: block; } #toggle-btn { height: 45px; width: 45px; background-color: red; } #navArea { display: none; } /*////////////////////////////////////////////////////////////////////////////*/ #linkCollection { font-size: 1.9rem; letter-spacing: 1.3px; } #linkCollection a { display: inline-block; margin-bottom: 1px; } #linkCollection a::after { content: "・"; } #linkCollection a:last-child::after { content: none; } #linkCollection a:nth-child(27)::after { content: none; } #linkCollection .container { position: relative; padding-top: 270px; height: 100vh; } #linkCollection video { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: -1; opacity: 0.1; } #linkCollectionBtn { position: absolute; right: 0; bottom: 0; width: 50%; height: 60px; background-color: #0000CD; color: #ffffff; font-size: 15px; text-align: right; letter-spacing: 0.7px; line-height: 60px; overflow: hidden; /* position: relative; */ /*position:absokuteが指定されているので子要素である#linkCollection::afterのためにposition:relativeを付ける必要はない*/ } #linkCollectionBtn::before { content: ""; display: block; background-color: #003399; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1, 0); transform-origin: bottom; transition: transform 0.3s; } #linkCollectionBtn:hover::before { transform-origin: top; transform: scale(1, 1); } #linkCollectionBtn p { margin: 0; position: absolute; top: 0px; right: 85px; z-index: 100; } #linkCollectionBtn p::after { content: ""; display: block; height: 5px; width: 5px; border-right: 1.5px solid #ffffff; border-bottom: 1.5px solid #ffffff; position: absolute; top: 25px; right: -43px; transform: rotate(45deg); }
(function (){ let elements = document.getElementsByClassName('scrollJs'); let elRect = []; let elTop = []; let count = 0; let wheelFlag = false; function getElTop() { for (var i = 0; i < elements.length; i++) { elRect.push(elements[i].getBoundingClientRect()); } for (var i = 0; i < elRect.length; i++) { elTop.push(elRect[i].top + window.scrollY); } } getElTop(); window.addEventListener('resize', function () { elRect = []; // 位置情報の配列を一旦空に elTop = []; // 位置の配列を一旦空に getElTop(); // 位置を取得 window.scrollTo(0, elTop[count]); // 現在表示中の画面位置へ }); document.addEventListener('wheel', function (e) { // e.preventDefault(); if (!wheelFlag) { wheelFlag = true; if (e.deltaY > 0) { if (count >= elements.length - 1) { count = elements.length - 1; } else { count++; } } else if (e.deltaY <= 0){ if (count <= 0) { count = 0; } else { count--; } } setTimeout(function (){ wheelFlag = false; },1200); setTimeout(function(){ window.scrollTo({ top: elTop[count], behavior: 'smooth', }); },20); } }); }()); ////////////////////////////////////////////////////////////////////////////////// 問題のコードです const btn = document.getElementsByClassName('scrollBtn'); btn.addEventListener('mouseover', () => { const img = document.getElementsByClassName('img'); img.style.transform = 'scale(1.05, 1.05)'; });

試したこと

Uncaught TypeError:で検索したところ「関数以外のオブジェクトを関数呼び出ししている」ということが分かりましたが原因が分かりません、、また、スペルのチェックも細かく行ったのですがエラーが発生してしまいます。

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

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

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

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

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

guest

回答1

0

ベストアンサー

原因

試してないので申し訳ありませんが、おそらく原因は
document.getElementsByClassName('scrollBtn');は配列のようなものなので、直接.addEventListener()をつけられないからです。

対策

  • idで要素1つだけを取得するか、
  • .forEach()で配列のようなものに格納されている要素一つ一つに処理します。

javascript

1// その処理をしたいボタンが1つだけしかないならidで取得 2const btn = document.getElementById('scrollBtn'); // ここid 3btn.addEventListener('mouseover', () => { 4 const img = document.getElementById('img-id'); // ここもid 5 img.style.transform = 'scale(1.05, 1.05)'; 6}); 7 8// 複数のボタンに同じ処理をしたいなら、forEach() 9// ↓[Element, Element, Element]みたいな感じ 10// ↓要素が1つしかなくても配列のようなものに格納される→[Element] 11const btns = document.getElementsByClassName('scrollBtn'); 12btns.forEach(elem => { 13 elem.addEventListener('mouseover', () => { 14 const img = document.getElementById('img-id'); // ここもid 15 img.style.transform = 'scale(1.05, 1.05)'; 16 }); 17}) 18

投稿2022/10/01 08:42

編集2022/10/01 08:55
Cocode

総合スコア2314

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問