title: Element on a menu not responding to a trigger event
body: <p>I've made a menu that reveals a drop down menu when you click or touch it. At least that's what happens when you select the word 'Menu2' but unfortunately it's not what happens when you select the words 'Menu3'.</p>
  
  <p>On Menu3, for some reason my code is not recognising the selection of the anchor element and then as a consequence the id of that anchor element is not being passed to the functions which will make the sub-menu appear and disappear. </p>
  
  <p>The strangest thing is that when I replace the 'else if' statement with an 'if' statement the menu under 'Menu2' will appear when I select 'Menu3'!</p>
  
  <p>The thing I took from this was that the querySelectorAll method and the For loop are working. It remains a mystery me why the third menu choice can't be selected.</p>
  
  <p>My question is can anyone work why the menu below 'Menu3' is not opening and closing?</p>
  
  <p>The listeners in the javascript code are activated when the window is loaded.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var timeout = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
  
  function listen(elem, evnt, func) {
    if (elem.addEventListener) { //W3C DOMS.
      elem.addEventListener(evnt, func, false);
    } else if (elem.attachEvent) { //IE DOM 7
      var r = elem.attachEvent("on" + evnt, func);
      return r;
    }
  }
  
  function attachListeners() {
    var selectors = document.querySelectorAll("a#a2, a#a3");
  
    for (var i = 0; i &lt; selectors.length; i++) {
      selectors[i].addEventListener("focus", function(event) {
        var id_of_clicked_element = event.target.id
      });
  
      if (id_of_clicked_element = 'a2') {
        var touch_div = document.getElementById(id_of_clicked_element);
        // return false;
      } else if (id_of_clicked_element = 'a3') {
        touch_div = document.getElementById(id_of_clicked_element);
        //return false;   
      }
    }
    
    listen(touch_div, 'touchstart', function(event) {
      // get new layer and show it
      event.preventDefault();
      mopen(id_of_clicked_element);
    }, false);
  
    listen(touch_div, 'mouseover', function(event) {
      // get new layer and show it
      mopen(id_of_clicked_element);  
    }, false);
  
    listen(touch_div, 'click', function(event) {
      // get new layer and show it
      mopen(id_of_clicked_element);
    }, false);
  }
  
  function m1View() {
    var y = document.getElementById('m1');
    if (y.style.visibility === 'hidden') {
      y.style.visibility = 'visible';
    } else {
      y.style.visibility = 'hidden';
    }
  }
  
  function m2View() {
    var z = document.getElementById('m2');
    if (z.style.visibility === 'hidden') {
      z.style.visibility = 'visible';
    } else {
      z.style.visibility = 'hidden';
    }
  }
  
  // open hidden layer
  function mopen(x) { // get new layer and show it
    var openmenu = x;
  
    if (openmenu = 'a2') {
      m1View();
    } else if (openmenu = 'a3') {
      m2View();
    }
  }
  
  window.onload = attachListeners;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#ddm {
    margin: 0;
    padding: 0;
    z-index: 30
  }
  
  #ddm li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 14px arial
  }
  
  #ddm li a {
    display: block;
    margin: 0 0 0 0;
    padding: 12px 17px;
    width: 130px;
    background: #CC0066;
    color: #FFF;
    text-align: center;
    text-decoration: none
  }
  
  #ddm li a:hover {
    background: #CC0066
  }
  
  #ddm div {
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #5970B2
  }
  
  #ddm div a {
    position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: 130px;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #5C124A;
    font: 13px arial;
    border: 1px solid #CC0066
  }
  
  #ddm div a:hover {
    background: #CC0066;
    color: #FFF
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="ddm"&gt;
    &lt;li&gt;&lt;a href="#" id="a1"&gt;Menu1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#" id="a2"&gt;Menu2&lt;/a&gt;
      &lt;div id="m1"&gt;
        &lt;a href="#"&gt; Dropdown 1.1 &lt;/a&gt;
        &lt;a href="#"&gt; Dropdown 1.2 &lt;/a&gt;
        &lt;a href="#"&gt; Dropdown 1.3 &lt;/a&gt;
        &lt;a href="#"&gt; Dropdown 1.4 &lt;/a&gt;
        &lt;a href="#"&gt; Dropdown 1.5 &lt;/a&gt;
        &lt;a href="#"&gt; Dropdown 1.6 &lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#" id="a3"&gt;Menu3&lt;/a&gt;
      &lt;div id="m2"&gt;
        &lt;a href="#"&gt;Menu4&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="a4"&gt;Menu5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="a5"&gt;Menu6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div style="clear:both"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>A JSfiddle can be found here: <a href="https://jsfiddle.net/Webfeet/z9x6Ly6k/27/" rel="nofollow noreferrer">https://jsfiddle.net/Webfeet/z9x6Ly6k/27/</a></p>
  
  <p>Thank you for any help anyone can provide.</p>
  
  <p>NewWeb</p>