JQueryと同じ処理をjavascriptに書き換えることは可能でしょうか？

Question

下記コードの処理をJavascriptに書き換えたいですが中々うまく作動しません。
自分なりにJavascriotコードに書き換えてみましたが全く動作しないので、どの辺が原因なのかわかる方いらっしゃいましたら教えていただきたいです。

処理内容
triggerクラスをクリックしたら trigger, listのそれぞれのクラスにactive, openクラスを追加したり取り除いたりする処理です。

$(function()
{
	$('#trigger').on('click', function()
	{
		if($(this).hasClass('active'))
		{
			$(this).removeClass('active');
			$('#list').removeClass('open');
		}
		else
		{
			$(this).addClass('active');
			$('#list').addClass('open');
		}
	});
});

function click()
{
	document.getElementById('trigger').onclick = function()
	{
		var has_trigger = document.getElementById('trigger');
		var target1 = document.querySelector('list');

		if(has_trigger.classList.contains('active'))
		{
			target1.classList.remove('active');
			target2.classList.remove('open');
		}
		else
		{
			target1.classList.add('active');
			target2.classList.add('open');
		}
	}
}

上記コード2点より
JQueryは正常に動作確認済みです。
また、Javascriptに関しましては、デベロッパーツールにてエラーは発生していませんが全く動作しません。

よろしくお願いします。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
また、htmlもご提示ください。
でないと「click()がどこからも呼ばれてないからでは？」という憶測でしか答えられません。

[Lhankor_Mhy]

$('#list') がバニラの方で見当たらないようですが。

Answer 1

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#trigger').addEventListener('click',e=>{
    e.target.classList.toggle('active');
    document.querySelector('#list').classList.toggle('open');
  });
});

Comments

[yambejp]

classListのtoggleはブラウザによっては実装されてません

Answer 2

そのまま移すとこうなりますが、jQuery で行っているエラー対策などはありません。

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#trigger').addEventListener('click', function() {
    if (this.classList.contains('active')) {
      this.classList.remove('active');
      document.querySelector('#list').classList.remove('open');
    } else {
      this.classList.add('active');
      document.querySelector('#list').classList.add('open');
    }
  });
});

提示コードを実行すると

Uncaught TypeError: Cannot read property 'classList' of null

となりますが、出てないならそもそも click() が実行されていないということです。急に出てきた menu_trigger/menu が不明ですね

Answer 3

jQueryではクラスをつけたり外したりしているのは $(this) と $('#list') ですが、これらはVanilla JSではどこに行ったのですか？

// ↓ $(function() { に相当
window.addEventListener('DOMContentLoaded', function() {
  // ↓ $('#trigger').on('click', function() { に相当
  ducument.querySelector('#trigger').addEventListener('click', function() {
    // ↓ $(this) に相当
    const _this = event.currentTarget;
    // ↓ $('#list') に相当
    const ducument.querySelector('#list');
    // ↓ if($(this).hasClass('active')) { に相当
    if(_this.classList.contains('active')) {
      // ↓ .removeClass(className) に相当
      _this.classList.remove('active');
      list.classList.remove('open');
    } else {
      // ↓ .addClass(className) に相当
      _this.classList.add('active');
      list.classList.add('open');
    }
  });
});

Comments

[yambejp]

jQueryの「$(function() {」処理は「DOMContentLoaded」的な
処理なのでどうせなならそこまで押さえてあげたほうが優しいです

[thyda.eiqau]

なるほど、確かにそうですね。一番クリティカルなところは、 $(document).ready(handler) が謎の click() { ... } に置き換わっていることかもしれないですね。

そもそも .ready() すべきかどうか ( ≒ DOMContentLoaded をリスンすべきかどうか) はコード全体の提示がないとなんとも言えないですね。
<script /> が </body> の直前にあるのであればリスンしなくてもいいし、コード中の他の箇所でもリスンしている (DOMContentLoaded に複数のリスナがある) のであれば、別のバグを誘発する可能性があるのでここではリスンしないべきで、集約するように誘導したほうがよいですね。

[yambejp]

そんなに難しく考えずともjqueryとjsを一致させる命題なのだから
document.getElementById('trigger')から始めるなら
jQueryの「$(function() {」を取ればいいだけです。

[thyda.eiqau]

はい、そこは全く同意見です。コードの修正は携帯からではしんどいので端末を触れるときに見ておきます。