keep dropdown when refreshing page (JS)

Marckson Assis 0
Viewed 23

I'm trying to create a dropdown submenu to show filter options to the user.

The problem is that when submitting a form to receive a response from the database, the page refreshes and the flyout closes, and I would like it to remain open.

I have code that I thought would work, however the value of sessionStorage.getItem is returning null.

JS code:

let nome_menu = ['menu-situacao', 'menu-pronome'];


for(i = 0; nome_menu.length > i; i++){
    let menu = document.querySelector('.'+nome_menu[i]);

    let sub_menu = document.querySelector('.'+nome_menu[i].replace("menu-", "ul-"));

    let j = 0;

    sub_menu.style.display = 'none';

    console.log(sessionStorage.getItem('menu'+[i]));

    console.log('menu'+[i]);

    
    menu.addEventListener('click', () =>{

        if(j == 0){
            sub_menu.style.display = 'block';
            j++;
            sessionStorage.setItem('menu'+[i], j);
            console.log(sessionStorage.getItem('menu'+[i]));
        }else{
            sub_menu.style.display = 'none';
            j = 0;
            sessionStorage.setItem('menu'+[i], j);
            console.log(sessionStorage.getItem('menu'+[i]));
        }

    })

    if(sessionStorage.getItem('menu'+[i]) == 1){
        menu.click();
    }
}
drop-down-menu dropdown javascript
1 Answers

'menu' + [0] = string + array. doesn't work well. Maybe you mean 'menu' + i

let nome_menu = ['menu-situacao', 'menu-pronome'];


for (i = 0; nome_menu.length > i; i++) {
  let menu = document.querySelector('.' + nome_menu[i]);

  let sub_menu = document.querySelector('.' + nome_menu[i].replace("menu-", "ul-"));

  let j = 0;

  sub_menu.style.display = 'none';

  console.log(sessionStorage.getItem('menu' + i));

  console.log('menu' + i);


  menu.addEventListener('click', () => {

    if (j == 0) {
      sub_menu.style.display = 'block';
      j++;
      sessionStorage.setItem('menu' + i, j);
      console.log(sessionStorage.getItem('menu' + i));
    } else {
      sub_menu.style.display = 'none';
      j = 0;
      sessionStorage.setItem('menu' + i, j);
      console.log(sessionStorage.getItem('menu' + i));
    }

  })

  if (sessionStorage.getItem('menu' + i) == 1) {
    menu.click();
  }
}

IT goldman0
Related