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

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

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

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

JavaScript

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

解決済

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

suzu1234
suzu1234

総合スコア36

CSS3

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

JavaScript

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

1回答

0リアクション

1クリップ

286閲覧

投稿2022/10/01 08:30

編集2022/10/01 08:34

実現したいこと

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

JavaScript

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