title: How can I apply put one event listener of the other?
body: <p>I'm trying to get this effect, whereby, the img background color is white at initial and when it is hovered, it should be red. But when it is clicked, a function should be carried out and the img background color should stick to red. However, when the imge is clicked again, the style should be like the initial style, where when the mouse is hovered, the img background color is red and when it is not, it is white.</p>
  
  <p>Hope you get the message clear, here's my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;            
          document.addEventListener('DOMContentLoaded', function() {
  
              var img = document.getElementById('search'),
                  search = document.getElementById('searchEngine');
  
              search.className = 'invisible';
  
              img.addEventListener('mouseover', makeRed);
              function makeRed(event) {
                  img.style.backgroundColor = "red";
              }
  
              img.addEventListener('mouseout', makeWhite);
              function makeWhite(event) {
                  img.style.backgroundColor = "white";
              }
  
              img.addEventListener('click', displaySearchField);
  
              function displaySearchField(event) {
                  if (search.className == 'invisible') {
  
                      search.className = 'visible';
  
                      img.style.backgroundColor = "red";
  
                  } else {
                      search.className = 'invisible';
                      makeWhite();
  
                  }
              }
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>The problem is, the background color is just not staying red when it is clicked!</p>
  
  <p>Update
  I've now reached till here with your advices:</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function() {
  
  var img = document.getElementById('search'),
      search = document.getElementById('searchEngine'),
      clicked = false;
  
  search.className = 'invisible';
  
  img.addEventListener('click', displaySearchField);
  
  function displaySearchField(event) {
      if (clicked == false) {
          clicked = true;
          img.style.backgroundColor = 'red';
          search.className = 'visible';
          console.log('You have clicked!');
  
      } else {
          clicked = false;
          img.addEventListener('mouseover', function() {
              img.style.backgroundColor = "red";
          });
  
  
          img.addEventListener('mouseout', function() {
              img.style.backgroundColor = "white";
          });
  
          search.className = 'invisible';
  
          console.log('You have unclicked!');
      }
  }
  
  });
  </code></pre>
  
  <p>Can someone please give me a lift at this final moment, I'm still not getting the desired effect...</p>