CODEWITHSUNDEEP
javascriptjquerydomgetelementbyid
user3574766
user3574766

Reputation: 641

document.getElementById wont set variable

HTML

 <form role="form">
      <div class="form-group">
          <label for="search" style="display:none">Search:</label>
          <input type="search" class="form-control" id="searchInput" placeholder="Type a game to search">
          <button type="submit" id="search" class="btn btn-default">Search</button>
      </div>
 </form>

JS

  $("#search").click(function(){   
     var query = document.getElementById("#searchInput").value;
     console.log(query); 
  });

I want an onclick event for #search to set the input field as a variable, so I can use it in other places later on and pass it to other functions, but the console returns null?

*I have included jQuery before this point

Upvotes: 0

Views: 143

Answers (2)

Sebasti&#225;n Espinosa
Sebasti&#225;n Espinosa

Reputation: 2133

the document.getElementById function only expects the actual id, not the CSS selector notation (#id), thats why returns null, because is literally searching for the object with id #searchInput as in:

 <input type="search" class="form-control" id="#searchInput" placeholder="Type a game to search">

Upvotes: 1

ItayB
ItayB

Reputation: 11367

If you are already using jQuery, you can select the searchInput with jQuery (instead of js - getElementById) What about replacing the line with:

var query = $("#searchInput").val();

Alternatively, just omit the # in your line (as suggested obove me):

var query = document.getElementById("searchInput").value;

Upvotes: 0

Related Questions