Combo buttons get disabled after using back key to navigate?

[peperez]

Hi all -

I'm getting some unintended behavior from my app. I have a combo button that sets my "main" screen to hidden and sets my "menu" screen to visible. I also have the following code to navigate back to my "main" screen. After I go back, the combo buttons on my "main" screen no longer trigger the events they're supposed to.

Can you guys see anything wrong with my code here?

document.onkeypress = function(evt) {
  if (evt.key === "back") {
    if (document.getElementById("menu").style.visibility === "visible") {
      // Go to screen 2
      evt.preventDefault();
      showMain();
    } else if (document.getElementById("main").style.visibility === "visible") {
      // Default behaviour to exit the app
    }
  }
}

function showMenu() {
  console.log("Show menu");
  document.getElementById("main").style.visibility = "hidden";
  document.getElementById("menu").style.visibility = "visible";
}

function showMain() {
  console.log("Show main");
  document.getElementById("main").style.visibility = "visible";
  document.getElementById("menu").style.visibility = "hidden";
}

[JonFitbit]

I'd probably make a few changes and add some logging to see what's happening:

let main = document.getElementById("main");
let menu = document.getElementById("menu");

document.onkeypress = function(evt) {
  console.log(`Main is: ${main.style.visibility}`);
  console.log(`Menu is: ${menu.style.visibility}`);
  if (evt.key === "back") {
    if (menu.style.visibility === "visible") {
      // Go to screen 2
      evt.preventDefault();
      showMain();
    } else if (main.style.visibility === "visible") {
      // Default behaviour to exit the app
    }
  }
}

function showMenu() {
  console.log("Show menu");
  main.style.visibility = "hidden";
  menu.style.visibility = "visible";
}

function showMain() {
  console.log("Show main");
  main.style.visibility = "visible";
  menu.style.visibility = "hidden";
}