title: How to make elements in a div clickable?
body: <p>I'm making a search engine program. People can enter a question and it will be displayed in a list in another <code>div</code> (the <code>stackdisplay</code>).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="search"&gt;
      &lt;input type="text" placeholder="Search.." name="search" id="qInput"&gt;
      &lt;button type="submit" onclick="ques(); stackDisplay()"&gt;
          &lt;i class="fa fa-search"&gt;&lt;/i&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="stack"&gt;
      &lt;span id="stackDisplay"&gt;
          &lt;center&gt;&lt;b&gt;&lt;u&gt; LIST OF QUESTIONS&lt;/u&gt;&lt;/b&gt;&lt;/center&gt;
          &lt;button id="close" onmouseover="clo()"&gt; &amp;times; &lt;/button&gt;
      &lt;/span&gt;
      &lt;button onmouseover="list()"&gt; &amp;#9776; &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function ques()
  {
      var question = document.getElementById("qInput").value;
      var x = Math.floor(Math.random()*1200);
      var y = Math.floor(Math.random()*580);
      c.fillText(question, x, y);
  }
  
  var i =1;
  function stackDisplay()
  {
      var quest = document.getElementById("qInput").value;
      document.getElementById("stackDisplay").innerHTML += i+") "+quest+"&lt;br&gt;";
      i+=1;
  }
  </code></pre>
  
  <p>I can't use <code>addeventlistener</code> or <code>onclick</code> function in javascript because it makes the whole div clickable when I only want the questions listed to be clickable. Is there a way to do this? I want to make another div to pop up when clicking the questions.</p>