Skip to main content
本文から 1 文字削除
ソース リンク
hatena
  • 186
  • 3

クリック時のイベントで menuContents のクラス名を変更しているので、一回クリックしタナトた後は、クリック時のイベント内では document.querySelector('.menuContents'); では要素を取得できません。

読み込み時に menuContents を取得しておけばいいでしょう。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  let flg = 0;
  menubtn.addEventListener('click', function () {
    flg = flg == 0 ? 1 : 0;
    if (flg == 0)
      menuContents.className = 'menuContents'
    else if(flg == 1)
      menuContents.className = 'menuContentsProject'
  });
}

ちなみに、クラス名を書き換えるのではなく、クラス名(例えば open)を追加する仕様にすれば、classList.toggle() を使ってシンプルに記述できます。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  menubtn.addEventListener('click', function () {
    menuContents.classList.toggle("open")
  });
}
.menuContents {
  display: none;
}
.menuContents.open{
  display: block;
}

クリック時のイベントで menuContents のクラス名を変更しているので、一回クリックしタナトは、クリック時のイベント内では document.querySelector('.menuContents'); では要素を取得できません。

読み込み時に menuContents を取得しておけばいいでしょう。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  let flg = 0;
  menubtn.addEventListener('click', function () {
    flg = flg == 0 ? 1 : 0;
    if (flg == 0)
      menuContents.className = 'menuContents'
    else if(flg == 1)
      menuContents.className = 'menuContentsProject'
  });
}

ちなみに、クラス名を書き換えるのではなく、クラス名(例えば open)を追加する仕様にすれば、classList.toggle() を使ってシンプルに記述できます。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  menubtn.addEventListener('click', function () {
    menuContents.classList.toggle("open")
  });
}
.menuContents {
  display: none;
}
.menuContents.open{
  display: block;
}

クリック時のイベントで menuContents のクラス名を変更しているので、一回クリックした後は、クリック時のイベント内では document.querySelector('.menuContents'); では要素を取得できません。

読み込み時に menuContents を取得しておけばいいでしょう。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  let flg = 0;
  menubtn.addEventListener('click', function () {
    flg = flg == 0 ? 1 : 0;
    if (flg == 0)
      menuContents.className = 'menuContents'
    else if(flg == 1)
      menuContents.className = 'menuContentsProject'
  });
}

ちなみに、クラス名を書き換えるのではなく、クラス名(例えば open)を追加する仕様にすれば、classList.toggle() を使ってシンプルに記述できます。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  menubtn.addEventListener('click', function () {
    menuContents.classList.toggle("open")
  });
}
.menuContents {
  display: none;
}
.menuContents.open{
  display: block;
}
サンプルコード追加
ソース リンク
hatena
  • 186
  • 3

クリック時のイベントで menuContents のクラス名を変更しているので、一回クリックしタナトは、クリック時のイベント内では document.querySelector('.menuContents'); では要素を取得できません。

読み込み時に menuContents を取得しておけばいいでしょう。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  let flg = 0;
  menubtn.addEventListener('click', function () {
    flg = flg == 0 ? 1 : 0;
    if (flg == 0)
      menuContents.className = 'menuContents'
    else if(flg == 1)
      menuContents.className = 'menuContentsProject'
  });
}

ちなみに、クラス名を書き換えるのではなく、クラス名(例えば open)を追加する仕様にすれば、classList.toggle() を使ってシンプルに記述できます。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  menubtn.addEventListener('click', function () {
    menuContents.classList.toggle("open")
  });
}
.menuContents {
  display: none;
}
.menuContents.open{
  display: block;
}

クリック時のイベントで menuContents のクラス名を変更しているので、一回クリックしタナトは、クリック時のイベント内では document.querySelector('.menuContents'); では要素を取得できません。

読み込み時に menuContents を取得しておけばいいでしょう。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  let flg = 0;
  menubtn.addEventListener('click', function () {
    flg = flg == 0 ? 1 : 0;
    if (flg == 0)
      menuContents.className = 'menuContents'
    else if(flg == 1)
      menuContents.className = 'menuContentsProject'
  });
}

クリック時のイベントで menuContents のクラス名を変更しているので、一回クリックしタナトは、クリック時のイベント内では document.querySelector('.menuContents'); では要素を取得できません。

読み込み時に menuContents を取得しておけばいいでしょう。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  let flg = 0;
  menubtn.addEventListener('click', function () {
    flg = flg == 0 ? 1 : 0;
    if (flg == 0)
      menuContents.className = 'menuContents'
    else if(flg == 1)
      menuContents.className = 'menuContentsProject'
  });
}

ちなみに、クラス名を書き換えるのではなく、クラス名(例えば open)を追加する仕様にすれば、classList.toggle() を使ってシンプルに記述できます。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  menubtn.addEventListener('click', function () {
    menuContents.classList.toggle("open")
  });
}
.menuContents {
  display: none;
}
.menuContents.open{
  display: block;
}
ソース リンク
hatena
  • 186
  • 3

クリック時のイベントで menuContents のクラス名を変更しているので、一回クリックしタナトは、クリック時のイベント内では document.querySelector('.menuContents'); では要素を取得できません。

読み込み時に menuContents を取得しておけばいいでしょう。

'use strict';

{    
  const menubtn = document.querySelector('.menubtn');
  const menuContents = document.querySelector('.menuContents');
  let flg = 0;
  menubtn.addEventListener('click', function () {
    flg = flg == 0 ? 1 : 0;
    if (flg == 0)
      menuContents.className = 'menuContents'
    else if(flg == 1)
      menuContents.className = 'menuContentsProject'
  });
}