Make div appear on click with Javascript

Could manage so far the things I wanted to achieve for my mega menu. The problem now is, that I forgot that touchscreens don´t really work with hover. So, the mega menu appears on hover with JavaScript. The menu item that triggers the div is the default menu of WordPress/theme. I know I can do it with a JavaScript button. But is it possible to achieve this with that specific default menu "span" li id="menu-item-136" like I achieved the rest of the mega menu styling with JavaScript? Adding a click option to that span? That would be great! Here´s the code so far:

//Showing mega menu on hover over menu point

document.getElementById("menu-item-136").addEventListener("mouseover", mouseOver);
document.getElementById("menu-item-136").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById("mega-menu").style.display = "block";
}

function mouseOut() {
  document.getElementById("mega-menu").style.display = "none";
}



//Let mega menu stay visible when hovering over it
//Style menupoint when hovering over mega menu div

document.getElementById("mega-menu").addEventListener("mouseover", mouseOver);
document.getElementById("mega-menu").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById("mega-menu").style.display = "block";
  var labels = document.getElementsByClassName("aux-menu-label");
  for (var i = 0; i < labels.length; i++) {
    labels[0].style.color = "yellow"
  }
}

function mouseOut() {
  document.getElementById("mega-menu").style.display = "none";
  var labels = document.getElementsByClassName("aux-menu-label");
  for (var i = 0; i < labels.length; i++) {
    labels[i].style.color = "blue"
  }
}

.menu-item-136 {
  background-color: grey;
  height: 50px;
}

.menu-item-136:hover {
  background-color: green;
}

.aux-menu-label {
  color: blue;
}

.mega-menu-1 {
  display: none;
  background-color: green;
  height: 200px;
}

<div>
  <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
    <a href="#" class="aux-item-content">
      <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span>
      <span class="aux-submenu-indicator"></span></a>
</div>



<div id="mega-menu" class="mega-menu-1">content</div>

Thanks for your help! :)

Solution

Sure @Artan

document.getElementById('menu-item-136').addEventListener('click',function(){ 

document.getElementsByClassName("aux-menu-label")[0].style.backgroundColor = 'yellow';
});

<div>
  <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
    <a href="#" class="aux-item-content">
      <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span>
      <span class="aux-submenu-indicator"></span></a>
</div>