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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3408閲覧

JQueryからネイティブJSへの書き換えでのエラー。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/04/25 03:12

非jQueryに書き換えてJSを勉強している最中なのですが、

$('.list-trigger_category').on('click', () => { $('.list-trigger_category_on').toggleClass('active'); return false; });

上記のコードを下記に書き換えた時

on の代わりに addEventListener を使用出来ると思うのですが。

Uncaught TypeError: click.addEventListener is not a function

とエラーが出てしまいます。

let click = document.getElementsByClassName('list-trigger_category'), on = document.getElementsByClassName('list-trigger_category_on'); click.addEventListener('click', () => { on.classList.toggle('active'); }, false);

色々記述方法を変えているのですが、中々解決しないためご教示いただけると助かります。

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

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

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

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

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

guest

回答2

0

ベストアンサー

getElementsByClassNameは、関数名(Elements)の通り、戻り値がelementではなく複数系(NodeList)となるため、直接addEventListenerすることはできません。

以下の様に書き換えれば動作するのではないかと思います。

js

1let click = document.getElementsByClassName('list-trigger_category'), 2 on = document.getElementsByClassName('list-trigger_category_on'); 3Array.from(click, e => { 4 e.addEventListener('click', () => { 5 Array.from(on, e => e.classList.toggle('active')); 6 }, false); 7});

投稿2017/04/25 03:46

monagano

総合スコア246

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

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

退会済みユーザー

退会済みユーザー

2017/04/25 12:21

ClassだとElement"s"なんですね・・・ 無事動きましたありがとうございます!
guest

0

冗長にやるならこんな感じでどうでしょうか?
場合によってはprototypeで対応してもよいかもしれませんが

javascript

1<style> 2.active{ 3 background-Color:lime; 4} 5</style> 6<script> 7window.onload=function(){ 8var n1=document.querySelectorAll('.list-trigger_category'); 9for(var i=0;i<n1.length;i++){ 10 n1[i].addEventListener('click',function(){ 11 n2=document.querySelectorAll('.list-trigger_category_on'); 12 for(var j=0;j<n2.length;j++){ 13 var cn=n2[j].getAttribute("class"); 14 var reg=new RegExp("(^| )active(?= |$)"); 15 if(cn.match(reg)){ 16 cn=cn.replace(reg,""); 17 }else{ 18 cn+=" active"; 19 } 20 n2[j].setAttribute("class",cn.trim()); 21 }; 22 }); 23} 24} 25</script> 26 27 28<input type="button" class="list-trigger_category" value="1"><br> 29<input type="button" class="list-trigger_category" value="2"><br> 30<input type="button" class="list-trigger_category" value="3"><br> 31 32<div class="list-trigger_category_on">test</div> 33<div class="list-trigger_category_on active">test</div> 34<div class="active list-trigger_category_on">test</div> 35<div class="active">test</div> 36

投稿2017/04/25 03:31

yambejp

総合スコア114585

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問