document.getElementById 不会设置变量

Question

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); 
  });

我想要一个#search 的onclick 事件来将输入字段设置为一个变量，这样我以后可以在其他地方使用它并将它传递给其他函数，但是控制台returns null?

*我在这一点之前包括了jQuery

Answer 1

如果您已经在使用 jQuery，您可以 select 使用 jQuery 的 searchInput（而不是 js - getElementById）如何将行替换为：

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

或者，只需省略行中的#（按照我上面的建议）：

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

Answer 2

document.getElementById 函数只需要实际的 id，而不是 CSS 选择器符号 (#id)，这就是 returns null 的原因，因为它实际上是在搜索具有 id 的对象#searchInput 如：

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

document.getElementById 不会设置变量

document.getElementById wont set variable

javascript

jquery

dom

getelementbyid