title: How can I make it so that when input field is empty, button does nothing?
body: <p>I'm making a simple searcher in which the user enters a query, clicks search, and the program returns either the location of said element, or a "No results found" line.</p>
  
  <p>I'm having trouble with the search button itself. It works perfectly fine when the element that is being searched exists, but if I click on it while the input is blank, it returns the "No results found" message. I would like it so that it does nothing. </p>
  
  <p>I'm using mainly JavaScript. What I've tried so far is make an if statement to check the length of the input, and then select the element from the DOM and make it disabled when length is 0.</p>
  
  <p>I have tried adding both <code>console.log</code> and <code>alert()</code> to check the state of the button (enabled/disabled), and they both work equally, no matter the length of the input value.</p>
  
  <pre><code>&lt;button value="submit" id="button" data-key="13" onclick="clickFunction()"&gt;
  &lt;/button&gt;
  
  
  function clickFunction() {
      var input = document.getElementById('input_id').value;
      var input = input.toLowerCase();
  
      /* disables button if there is no input */
      if ( input.length === 0 ) {
          document.getElementById("button").disabled = true;
          console.log("disabled");
      } else if (input.length &gt; 0) {
          document.getElementById("button").disabled = false;
          console.log("enabled");
      }
  }    
  </code></pre>
  
  <p>I have also tried using jQuery <code>($("#button").attr("disabled", true))</code>, but it's not working either.</p>
  
  <p>Am I missing something?</p>