下記コードの処理をJavascriptに書き換えたいですが中々うまく作動しません。
自分なりにJavascriotコードに書き換えてみましたが全く動作しないので、どの辺が原因なのかわかる方いらっしゃいましたら教えていただきたいです。
処理内容
triggerクラスをクリックしたら trigger, listのそれぞれのクラスにactive, openクラスを追加したり取り除いたりする処理です。
JQuery
1$(function() 2{ 3 $('#trigger').on('click', function() 4 { 5 if($(this).hasClass('active')) 6 { 7 $(this).removeClass('active'); 8 $('#list').removeClass('open'); 9 } 10 else 11 { 12 $(this).addClass('active'); 13 $('#list').addClass('open'); 14 } 15 }); 16});
Javascript
1function click() 2{ 3 document.getElementById('trigger').onclick = function() 4 { 5 var has_trigger = document.getElementById('trigger'); 6 var target1 = document.querySelector('list'); 7 8 if(has_trigger.classList.contains('active')) 9 { 10 target1.classList.remove('active'); 11 target2.classList.remove('open'); 12 } 13 else 14 { 15 target1.classList.add('active'); 16 target2.classList.add('open'); 17 } 18 } 19}
上記コード2点より
JQueryは正常に動作確認済みです。
また、Javascriptに関しましては、デベロッパーツールにてエラーは発生していませんが全く動作しません。
よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー