ClassList.toggleで複数のクラスをtoggleする方法

Question

ClassList.toggleで複数のクラスをtoggleする方法があれば、ご教示いただけると助かります。

エラー Uncaught TypeError: Cannot read property 'toggle' of undefined

  document.getElementById('drawer-toggle').addEventListener('click', () => {
    document.getElementsByClassName('back_screen').classList.toggle('back');
    document.getElementsByClassName('back_screen').classList.toggle('open');
  }, false);

Comments

[kei344]

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

Answer 1

TypeError: Cannot read property 'toggle' of undefined

複数のclassをtoggleする手法は既出の回答通りですが、質問文のコードで TypeError が発生する事はあり得ないのでエラーの原因は別にあるように思います。
エラーは classList が undefined である事を表していますが、classList は Element 上に存在する為、要素ノード以外から参照している可能性があります。
仮に質問文のコードが実コード(エラーが発生するコード)と同じなのであれば、document.body が構築される前に呼び出している可能性があります。
(実コードが別なら、エラーを再現可能なコードを開示すると良いと思います)

classList#toggle

classList#toggle は複数のクラスを指定する動作をサポートしていません。

• toggle(token, force) - DOM Standard 日本語訳
• toggle(token, force) - DOM Standard

また、classList#toggle の第二引数は「add(), remove() の挙動を強制する為の引数」になります。

• 第二引数が true … add() を強制する
• 第二引数が false … remove() を強制する

document.body.classList.toggle('back','open');

この場合、'open' は Boolean 型に変換されて true となる為、「backクラス」が追加される動作が強制されます。

Re: ryuseiasa さん

Comments

[退会済みユーザー]

実コードが間違っていたため修正いたしました。
ご確認いただけると幸いです。

[think49]

問題が全く変わっています。
初めの質問では classList.toggle('back','open'); になっていましたが、今は第二引数がありません。
これは回答を受けて質問内容を変えたのではないでしょうか。
初めからこのコードだったのなら、私の回答が全くの無駄になります。
質問前に質問文にあるコードだけで「問題が再現されること」を必ず確認して下さい。
掲示板は質問者一人のものではなく、同じ問題に遭遇した人が解決するための情報となる事に留意し、回答と質問の整合性を損なわないよう編集をお願いします。

getElementsByClassName は HTMLCollection を返すので繰り返し処理しなければ、classList を参照出来ません。
for, Array#forEach, for-of 等を活用して対応して下さい。
https://teratail.com/questions/73754 でも同じような回答を貰っているようですが…。

[退会済みユーザー]

私の不手際でご迷惑をおかけしてしまい申し訳ございません。
今後、編集などには細心の注意を払いたいとおもいます。

Answer 2

  document.getElementById('drawer-toggle').addEventListener('click', () => {
    document.body.classList.toggle('back');
    document.body.classList.toggle('open');
  }, false);

【classList APIの複数引数について - Qiita】
http://qiita.com/sounisi5011/items/c42c51c7ffe4116ecd10

Answer 3

要素にClassを使わずIDを使用することでとりあえずは解決いたしました。

  document.getElementById('drawer-toggle').addEventListener('click', () => {
    document.getElementById('back_screen').classList.toggle('back');
    document.getElementById('back_screen').classList.toggle('open');
  }, false);