title: Reset to a custom previous point in the code JAVASCRIPT
body: <p>I am building a responsive mobile menu. I am a beginner so don't know how to use loops effectively.</p>
  <p>The Problem is that When in mobile view, hamburger menu icon shows and when it is clicked, it changes to close menu icon &amp; when clicked again, changes to hamburger menu.
  BUT it stucks there. it only works to 2 clicks and after that it stuck to hamburger menu icon &amp; never changes to close menu icon.</p>
  <p><strong>JAVASCRIPT CODE:</strong></p>
  <pre><code>window.addEventListener('resize', function detectWidth(){
  
      let screenWidth = screen.width;
      
      if(screenWidth &lt;= 800){
      
          document.querySelector(&quot;nav ul&quot;).innerHTML = `&lt;img id=&quot;menuIcon&quot; src=&quot;Header/menuIcon.png&quot; alt=&quot;Menu Icon&quot;&gt;`;
          
          // TO SHOW MENU ITEMS &amp; CLOSE MENU ICON AFTER CLICKING ON HAMBURGER MENU BUTTON
          document.querySelector(&quot;#menuIcon&quot;).addEventListener(&quot;click&quot;, function(){
              document.querySelector(&quot;#menuIcon&quot;).outerHTML = `&lt;img id=&quot;closMenuIcon&quot; src=&quot;Header/closeMenuIcon.png&quot; alt=&quot;Close Menu Icon&quot;&gt;`;
              
  
              //TO CHANGE BACK TO MENU ICON
              document.querySelector(&quot;#closMenuIcon&quot;).addEventListener(&quot;click&quot;, function () {
                      document.querySelector(&quot;#closMenuIcon&quot;).outerHTML = `&lt;img id=&quot;menuIcon&quot; src=&quot;Header/menuIcon.png&quot; alt=&quot;Menu Icon&quot;&gt;`;
              });
          })
      
      } else{
      
          document.querySelector(&quot;nav ul&quot;).innerHTML = `&lt;ul&gt;
                                                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Shop&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About us&lt;/a&gt;&lt;/li&gt;
                                                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact us&lt;/a&gt;&lt;/li&gt;
                                                          &lt;/ul&gt;`;
      }
  });
  </code></pre>
  <p>please forgive me if it is so obvious, I am a beginner and i think it requires loop of some kind.</p>