72252


以下の内容で表示を押すとメニューの以下の内容を表示非表示するものを作ってみていますが、画面が一瞬ちらついて映るだけで原因を教えていただけないでしょうか？

[code]

    <div class="menuContents">
      <ul class="menuList">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
    
[/code]

またJavascript内の変数のlet flg = 0;が毎回0に戻ってしまいます。  
以上2点のご教授お願い致します。  
＊＊＊javascriptの変数の件解決いたしました＊＊＊  
`<a href="javascript:void(0)" class="menubtn">表示</a>`  
とすることでlet flgの値が変更できるようになりました！  
ただし表示の後非表示になりませんでした。

ソースを以下に示します。  
CSSに関しては.menuContentsと.menuContentsProjectだけでよさそうですがすべて一応載せておきます。

**HTML**

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="css/style.css">
      <title>JavaScript DOM</title>
    </head>
    <body>
      <div class="container">
        <div class="menu">
          メニュー[ <a href="" class="menubtn" >表示</a>]
          <div class="menuContents">
            <ul class="menuList">
              <li>a</li>
              <li>b</li>
              <li>c</li>
            </ul>
          </div>
        </div>
      </div>
      <script src="js/main.js"></script>
    </body>
    </html>
    
[/code]

**CSS**

[code]

    .container{
      background: skyblue;
      width: 120px;
      height: auto;
      /* transition-property: width,height;
      transition-duration: 2s; */
      
    }
    .menu{
      text-align: center;
    }
    .menuContents{
      display: none;
    }
    .menuContentsProject{
      display: block;
    }
    .menuList{
      padding:0 0 0 10px;
      margin:0;
    }
    .menuList li{
      background-color: springgreen;
      list-style-type: none;
      text-align: left;
    }
    
[/code]

**javascript**

[code]

    'use strict';
    
    {
        
      const menubtn = document.querySelector('.menubtn');
      let flg = 0;
      menubtn.addEventListener('click', function () {
        flg = flg == 0 ? 1 : 0;
        var menuContents = document.querySelector('.menuContents');
        if (flg == 0)
          menuContents.className = 'menuContents'
        else if(flg == 1)
          menuContents.className = 'menuContentsProject'
      });
    }
    
[/code]


CC BY-SA 4.0
2020-11-28T04:16:41.720
72251
2020-11-29T07:21:25.797
2020-11-28T04:37:12.893
42828
42828
question
javascript html css
javascriptの動的な画面変更とフラグ管理について


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

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

[code]

    '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'
      });
    }
    
[/code]

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

[code]

    'use strict';
    
    {    
      const menubtn = document.querySelector('.menubtn');
      const menuContents = document.querySelector('.menuContents');
      menubtn.addEventListener('click', function () {
        menuContents.classList.toggle("open")
      });
    }
    
[/code]

[code]

    .menuContents {
      display: none;
    }
    .menuContents.open{
      display: block;
    }
    
[/code]


CC BY-SA 4.0
2020-11-28T05:17:02.340
72252
2020-11-29T07:21:25.797
2020-11-29T07:21:25.797
42240
42240
72251
answer